-1

Designing a single page application in reactjs.I have a fixed navbar on the top of the page and i have 4 section .on click of link in navabr it jumps to that particular section.But i want to highlight that li with small border below.if user scrolls to any section without clicking link in navbar,the link must be highlighted with border.

// header.js

  <ul className="col-2 flex-row flex-justify-align-center ">
   <li className="navigation__link"><a  href="#problem">Problem</a></li>
   <li className="navigation__link"><a  href="#solution">Solution</a></li>
   <li className="navigation__link"><a href="#footprint">Footprint</a></li>
   <li className="navigation__link"><a  href="#services">Services</a></li>
   <li className="navigation__link"><a  href="#contact">Contact</a></li>             
  </ul>

function App() {
  return (
    <div className="App">
      <div id="problem"></div>
      <Header></Header>
      <div id="solution">
        <Solution></Solution>
      </div>
      <div id="footprint">
        <Footprint></Footprint>
      </div>
      <div id="contact">
        <Contactus></Contactus>
        <Footer></Footer>
      </div>

    </div>
  );
}

Question is unclear because I didn't get how to frame question for this requirement.

Alan M
  • 616
  • 5
  • 15
Karthi
  • 3,019
  • 9
  • 36
  • 54

1 Answers1

1

You need to use scroll spy. Visit this git repository React-scrollspy.

relavent question: How to implement a scrollspy with React

waqas Mumtaz
  • 689
  • 4
  • 12