如何在滚动时为 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。

相关问题：如何使用 React 实现滚动间谍