CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-hooks
agentK
agentK

Reputation: 65

React JS detect active component and update navbar

I am new to React, so apologies if this is obvious.

I have several components on a single-page website. This is my App.js:

function App() {
  return (
    <>
      <Header />
      <Nav />
      <About />
      <Experience />
      <Portfolio />
      <Activities />
      <Contact />
      <Footer />
    </>
  );
}

This is the Nav component:

const Nav = () => {
    const [activeNav, setActiveNav] = useState('#');
    return (
        <nav>
            <a href='#' onClick={() => setActiveNav('#')} className={activeNav === '#'? 'active': ''}><BiHome/></a>
            <a href='#about' onClick={() => setActiveNav('#about')} className={activeNav === '#about'? 'active': ''}><AiOutlineUser/></a>
            <a href='#experience' onClick={() => setActiveNav('#experience')} className={activeNav === '#experience'? 'active': ''}><MdWorkOutline/></a>
            <a href='#portfolio' onClick={() => setActiveNav('#portfolio')} className={activeNav === '#portfolio'? 'active': ''}><AiOutlineCode/></a>
            <a href='#contact' onClick={() => setActiveNav('#contact')} className={activeNav === '#contact'? 'active': ''}><BiMessageSquareDetail/></a>
            </nav>
    )
}

As you can see, it has links to the other components. I have styled it as a floating navbar. When the user clicks on a link, they're taken to that section of the page. The link's class is changed to "active" - its CSS gets changed to distinguish it from the rest.

Now I want to do it the other way around. When a user scrolls to a component, say Experience, I want the class of the corresponding link in Nav to be changed to active. How can I do that?

Thanks very much for reading until the end :)

Upvotes: 0

Views: 213

Answers (1)

Shuyangyyy Lii
Shuyangyyy Lii

Reputation: 26

maybe you can use onScroll event to calculate the difference between component's height and page's scrollTop in real time

Upvotes: 0

Related Questions