1

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

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

我所追求的是当您滚动到该部分时导航中的链接颜色会发生变化 - 将其标记为“活动”部分。我想我可以做一个简单的“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>
4

1 回答 1

2

你可以使用这样的东西：

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/

于 2013-05-01T11:04:00.620 回答