javascript - 当用户滚动时，将事件状态添加到链接中的导航

Question

我不确定这有多大可能，但我想我会试一试。

我有一个简单的滚动浏览网站，滚动时每个部分都有单独的部分——用颜色清楚地定义。我在右侧有一些固定的导航，当单击链接时，它会平滑地向下(或向上)滚动到该部分。一切正常。

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

http://dataveyes.com/en/ — 这个网站是如何工作的，但是导航链接会根据您滚动时所在的部分改变颜色。

我现在不会发布任何 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>

Answer 1

你可以使用这样的东西:

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

http://jsfiddle.net/GBbu6/1/