使用 jquery 在单击导航项和滚动过去 div 时添加类

Question

我希望使用 jquery 在单击导航项以及滚动到该部分 div 时添加“选定”类。

到目前为止，我已经在单击导航项时添加了类，但我不确定如何在滚动通过每个部分 div 时巧妙地添加相同的效果。

这是我在点击时添加类的脚本（非常简单和标准）：

$('#fixednav li').click(function(){
$('#fixednav li').removeClass("selected");
$(this).addClass("selected");
});

...当用户单击固定菜单中的项目时，一切都很好。但是，当用户只是向下滚动页面而不使用固定菜单时，如何添加选定的类？每个部分都有一个 div id，所以我认为添加一些内容以在滚动超过 div id 时添加类会很容易......

Here's my fiddle

向下滚动一下以查看固定的导航弹出......

Answer 1

我遇到了同样的问题，我用 scrollspy 来修复它这里是引导程序上的链接和演示：

scrollspy

如果你得到一些 pb，请告诉我。

Answer 2

检查这是否对您有帮助 fiddle

这是使用的js，检查html和css的fiddle。

var hei = $("#header").height();
    $(window).scroll(function(){
        if($(window).scrollTop() > hei){
            $("#header").addClass('fixed');
            $('.body-wrapper').css('margin-top',hei);
        }else{
            $("#header").removeClass('fixed');
            $('.body-wrapper').css('margin-top','0');
        }
    });
    $("#header li a").on('click', function(event){
        event.preventDefault();
        var header_height = $("#header").height();
        var target = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(target).offset().top-header_height
        }, 1000);
    });

    var aChildren = $("#header li").children(); // find the a children of the list items
    var aArray = []; // create the empty aArray
    for (var i=0; i < aChildren.length; i++) {    
        var aChild = aChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    } // this for loop fills the aArray with attribute href values

    $(window).scroll(function(){
        var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
        var windowHeight = $(window).height(); // get the height of the window
        var docHeight = $(document).height();


        for (var i=0; i < aArray.length; i++) {
            var theID = aArray[i];
            var divPos = $(theID).offset().top-hei-30; // get the offset of the div from the top of page
            var divHeight = $(theID).height(); // get the height of the div in question
            if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                $("a[href='" + theID + "']").addClass("nav-active");
            } else {
                $("a[href='" + theID + "']").removeClass("nav-active");
            }
        }

    });