javascript – 在窗口滚动上更改导航活动类

我想创建像这里 http://www.strikingly.com/s/pages/default-ion?demo=ion#1的滚动效果
我现在需要的只是在窗口滚动时更改导航li类活动,只需使用< a href ='#about'>更改它即可.哈希目标

http://jsfiddle.net/Dxtyu/131/

解决方法

DEMO

Serlite的代码非常好,但有一些错误.

>如果向下滚动到最后两个元素,则元素具有活动类,因此两者都突出显示.

解

添加$(‘#menu-center ul li a’).removeClass(“active”);在下面的代码中添加新类之前删除所有以前的活动类.

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active"); //added to remove active class from all a elements
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

>如果单击第二个或更多菜单链接,则可以滚动到该位置,但将活动类更改为上一个链接.

解

$('html,body').stop().animate({
            'scrollTop': $target.offset().top+2