JQuery - 导航项根据部分更改为“当前”，滚动

Question

我有一个导航栏，点击后会将用户带到特定部分（通过 id）。我想知道如何操纵它以使导航项在该部分的相应视图存在时更改为“当前”。然而，我关注了许多原始帖子，因为我已经有了一个设计，它似乎并没有有效地工作。任何帮助将不胜感激。

HTML：

<nav id="primary-menu" class="dark">

                    <ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">
                        <li class="current"><a href="#" data-scrollto="#slider" data-offset="100"><div>Home</div></a></li>
                        <li><a href="#" data-scrollto="#content" data-offset="100"><div>About</div></a></li>
                        <li><a href="#" data-scrollto="#section-services" data-offset="100"><div>Website</div></a></li>
                        <li><a href="#" data-scrollto="#mobile-app" data-offset="100"><div>Mobile App</div></a></li>
                        <li><a href="#" data-scrollto="#portfolio" data-offset="100"><div>Portfolio</div></a></li>
                        <li><a href="#" data-scrollto="#section-pricing" data-offset="100"><div>Pricing</div></a></li>
                        <li><a href="#" data-scrollto="#testimonials" data-offset="100"><div>Testimonials</div></a></li>
                        <li><a href="#" data-scrollto="#section-contact" data-offset="100"><div>Contact</div></a></li>
                            <!--<a href="#" data-scrollto="#content" data-offset="100" class="dark one-page-arrow"><i class="icon-angle-down infinite animated fadeInDown"></i></a>-->

                    </ul>
</nav>

CSS：

#primary-menu { 
    float: right; 
}

#header.full-header #primary-menu > ul {
   float: left;
   padding-right: 15px;
   margin-right: 15px;
   border-right: 1px solid #EEE;
}

#primary-menu ul {
     list-style: none;
     margin: 0;
}

#page-menu nav {
   position: relative;
   float: right;
}

#page-menu nav ul {
   margin-bottom: 0;
   height: 44px;
}

Answer 1

使用 bootstrap scrollspy 可以帮助解决这个问题

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_scrollspy_js&stacked=h

请参考此链接，其中包含您正在寻找的示例