如何为滚动条上的html中的活动链接的li添加边框

Question

在reactjs中设计一个单页应用程序。我在页面顶部有一个固定的导航栏，我有4个部分。在navabr中单击链接时，它会跳到该特定部分。但是我想用小边框突出显示li下方。如果用户滚动到任何部分而未单击导航栏中的链接，则该链接必须以边框突出显示。

// 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>
  );
}

问题不清楚，因为我不知道如何对此要求提出问题。

Answer 1

您需要使用滚动间谍。访问此git存储库React-scrollspy。

相关问题：How to implement a scrollspy with React