Question

我对JQuery有点新鲜，如果这很明显，请原谅我。

我正在运行此代码，以便在用户向上和向下滚动单个页面时向固定的导航栏列表项添加/删除“活动”类。它适用于Chrome和IE，但不适用于Firefox。有谁知道为什么？

谢谢！

// #div ids for page content
$(this).ready(function(){
var section0Height = $('#home').height();
var section1Height = $('#mission').height();
var section2Height = $('#services').height();
var section3Height = $('#team').height();
var section4Height = $('#contact').height();


// #li ids for nav items
$(window).scroll(function() {
    var winTop = $(window).scrollTop();
    if(winTop >= section0Height && winTop <= section1Height){
        $('#section0').addClass("active").not().removeClass("active");
    } else if(winTop >= section1Height && winTop <= section2Height){
        $('#section1').addClass("active").not().removeClass("active");
    } else if(winTop >= section2Height && winTop <= section3Height){
        $('#section2').addClass("active").not().removeClass("active");
    } else if(winTop >= section3Height && winTop <= section4Height){
        $('#section3').addClass("active").not().removeClass("active");
    } else if(winTop >= section4Height){
        $('#section4').addClass("active").not().removeClass("active");
    } 
  });
});

Answer 1

替换

$(this).ready(function(){ ...

带

$(document).ready(function(){ ...

jQuery .ready()

.ready（）方法只能在匹配的jQuery对象上调用当前文件

除了not()没有参数的事实，对你没有任何帮助，这是我发现所发布的代码无法工作的唯一原因吗？

Answer 2

根据您提供的内容a working fiddle。基本上，您需要找到文档顶部的偏移量，而不是查找div的高度。当窗口向下滚动到该div时，$(window).scrollTop()将与$(section).offset().top匹配。小提琴有更多的注释来解释不同的部分，但这里是快速参考的代码：

jQuery(function ($) {
    var links = $('#section0, #section1, #section2, #section3');

    $(window).scroll(function () {
        var winTop = $(window).scrollTop();

        $.each(links.removeClass('active').get().reverse(), function (idx, link) {
            var section = $( $(link).attr('href') );
            if (winTop >= section.offset().top) {
                $(link).addClass('active');
                return false;
            }
        });
    });
});

JQuery添加类在Firefox中不起作用

2 个答案: