Javascript 在用户滚动时向链接中的导航添加活动状态

我不确定这有多可能，但我想我应该试一试

我有一个简单的滚动浏览网站，每一个单独的部分，因为你滚动-明确定义的颜色。我在右边有一些固定导航，当点击链接时，它会平滑地向下（或向上）滚动到该部分。这一切都很好

我想要的是导航中的链接颜色在您滚动到该部分时发生变化-将其标记为“活动”部分。我想我可以做一个简单的'addClass'或'css'jQuery，如果点击，它会改变，但是用户也可以自由滚动，所以如果导航链接随着用户滚动而改变，以确定您在哪个部分，这将是一件好事

-此网站的工作方式，但导航链接的颜色会根据您滚动时所在的区域而变化

我现在还不会发布任何HTML，因为我想知道这样的事情是否可行

更新

用于导航的HTML

<div class="menu-navigation-desktop not-mobile">
    <ul>
        <li class="menu-item-home"><a class="smooth-scroll-no-offset" href="#home"><span class="ss-icon ss-gizmo">home</span></a></li>
        <li class="menu-item-we"><a class="smooth-scroll" href="#we">We</a></li>
        <li class="menu-item-design"><a class="smooth-scroll" href="#design">Design</a></li>
        <li class="menu-item-sustainability"><a class="smooth-scroll" href="#sustainability">Sustainability</a></li>
        <li class="menu-item-form"><a class="contact-form-action"><span class="ss-icon ss-gizmo">compose</span></a></li>
        <li class="menu-item-contact"><a class="smooth-scroll" href="#contact"><span class="ss-icon ss-gizmo">phone</span></a></li>
    </ul>
</div>

您可以使用以下内容：

var sections = $('.section');
$(window).scroll(function() {
    var currentPosition = $(this).scrollTop();
    sections.removeClass('selected').each(function() {
        var top = $(this).offset().top,
            bottom = top + $(this).height();
        if (currentPosition >= top && currentPosition <= bottom) {
            $(this).addClass('selected');
        }
    });
});

var sections=$（'.section'）；
$（窗口）。滚动（函数（）{
var currentPosition=$（this.scrollTop（）；
sections.removeClass（'selected'）。每个（函数（）{
var top=$（this）.offset（）.top，
底部=顶部+$（此）.height（）；
如果（currentPosition>=top&¤tPosition，听起来就像是在寻找jQuery航路点（）.Hmm，我认为，本质上，我需要使用jQuery来计算每个部分的高度，然后当你滚动时，一旦导航达到计算的最大高度，它就会改变以适应新的部分？感谢这一点-我认为这几乎就是它。唯一的事情是类，例如，需要应用于导航链接列表，而不是实际的幻灯片。有什么想法吗？链接是否有对应于节id的href？用HTML更新了我的导航-是的，它们有href:）谢谢你的帮助，Pete。它就快到了。在将类添加到href的行中，我还需要它将类添加到“.menu navigation desktop ul li”，它是添加了类的a href的父级。那么，它还能将“活动幻灯片”类添加到父级li吗？`
太好了，皮特。谢谢你的时间和帮助。