javascript - 在窗口滚动时更改导航事件类

Question

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

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

Answer 1

DEMO

Serlite的代码非常好，但有一些错误。

1. 如果向下滚动到末尾，最后两个 a 元素具有 active 类，因此它们都会突出显示。

解决方案

在下面的代码中添加了 $('#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");
        }
    });
}

1. 如果您点击第二个或更大的菜单链接，它会让您滚动到该位置，但会将事件类更改为上一个链接。

解决方案

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