Javascript 单页网站-导航突出显示当前部分

我在集成一个导航栏时遇到问题，该导航栏会突出显示网站上正在查看的当前部分。我只希望当前查看的部分在导航栏中以粗体显示

以下是：

HTML

  <nav id="nav-wrap">
    <ul>
      <li class="current"><a class="page" href="#home">Home</a></li>
      <li><a class="page" href="#about">About</a></li>
      <li><a class="page" href="#portfolio">Portfolio</a></li>
      <li><a class="page" href="#scrapbook">Scrapbook</a></li>
      <li><a class="page" href="#contact">Contact</a></li>
    </ul>
  </nav>

  <div class="header-content">
    <img id="logo" src="img/logo.png" alt="logo" height="200px" width="200px">
    <h3>Joseph Cooper</h3>
    <h3>Graphic Designer</h3>
    <p> 10.03.97 </p>
  </div>

<a href="#about"><img id ="down" src="img/down.png" height="42px" width="42px"></a>

约瑟夫·库珀
平面设计师
10.03.97

---

我添加了两行代码，一行用于从导航中的所有href中删除粗体，另一行用于将粗体添加到单击的href中。看看代码笔：

---

我试图通过使用jQuery的offset（）.top并对照窗口的scrollTop检查它来解决这个问题

var$window=$（window），
homeLink=$（“a[href='#home']），
aboutLink=$（“a[href='#about']），
portfolioLink=$（“a[href='#公文包']）；
$window.on（“滚动”），功能（e）{
if（$window.scrollTop（）<$（“#about”）.offset（）.top）{
$（“导航包裹”）.find（“a”）.css（“字体重量”，400）；
css（“字体重量”，900）；
}else if（$window.scrollTop（）>$（“#关于”）.offset（）.top&$window.scrollTop（）<$（“#公文包”）.offset（）.top）{
$（“导航包裹”）.find（“a”）.css（“字体重量”，400）；
关于link.css（“字体重量”，900）；
}
});你可能需要Javscript来完成这项工作…你对此做了什么研究？我想你可以用我尝试过的航路点来完成它，但它似乎不起作用，我四处搜索了其他方法，找到了一些链接，但它们似乎都不想起作用？这是我以前拥有的，它仅在点击clit时高亮显示链接。我希望用户能够向下滚动到“关于”部分，导航栏将自动突出显示它。就像你说的：我只希望当前浏览的部分在导航栏中以粗体显示。这个脚本就是这样做的，选中href的粗体字体。我认为这不起作用，因为所有链接都在同一个页面上？这是我追求的结果-但是当我在我的网站上实现它时，它仍然不起作用，但在codepen上效果很好？这也只适用于Home和About部分的codepen，我为公文包等添加了代码，但没有突出显示这些页面
   function smoothScroll (duration) {
      $('a[href^="#"]').on('click', function(event) {        
          var target = $( $(this).attr('href') );

          $("#nav-wrap a").css('font-weight','normal')/*this line remove bold from all href*/
          $(this).css('font-weight','bold')/*this line add bold to clicked href*/

          if( target.length ) {
              event.preventDefault();
              $('html, body').animate({
                  scrollTop: target.offset().top
              }, duration);
          }
      });
    }