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/

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

1 个答案: