1

我对 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");
    } 
  });
});
4

2 回答 2

2

代替

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

和

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

jQuery .ready()

.ready() 方法只能在匹配当前文档的 jQuery 对象上调用

除了not()没有参数对您没有任何作用之外，这是我可以发现发布的代码不起作用的唯一原因？

于 2013-02-27T19:41:28.203 回答
0

这是一个基于您提供的小提琴。基本上，您不需要查找 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;
            }
        });
    });
});
于 2013-03-05T22:29:36.773 回答