Javascript 滚动功能无法正确触发动画

我有一个简单的.scroll函数，可以在主体的.scroll顶部高于特定值时触发事件：

$(window).scroll(function() {
    if($('body, html').scrollTop() > 250) {
        console.log("higher");
        $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow');
    } else {
        console.log("lower");
        $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow');
    }
});

我的问题是，它为每个滚动像素触发函数。我只想根据scrollTop值触发动画

我怎样才能以最好的方式解决这个问题

---

谢谢

这是因为您在函数中同时从body和html中获得了scrollTop值。根据浏览器的不同，这将给您带来一些不可预测的结果。您应该只获得body的scrollTop值

编辑：显然，获取窗口的scrollTop值可以解决跨浏览器的问题。在FF和Chrome中为我工作：

$(window).scroll(function() {
    console.log($(window).scrollTop());
    if($(window).scrollTop() > 250) {
        console.log("higher");
        $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow');
    } else {
        console.log("lower");
        $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow');
    }
});

---

对于阻止变量，这应该是可行的

var animateOnce = false;
$(window).scroll(function() {
    if($('body, html').scrollTop() > 250) {
        if(animateOnce == false) {
            $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow');
        }
        animateOnce = true;
    } else {
        if(animateOnce == true) {
            $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow');
        }
        animateOnce = false;
    }
});

试试这个

var _top, _last_top = -1;
$(window).scroll(function() {
    _top = $('body, html').scrollTop();

    if(_top > 250 && _last_top < 250) {
        _last_top = _top;
        $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow');
    }

    if(_top < 250 && _last_top > 250) {
        _last_top = _top;
        $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow');
    }
});

---

对于滚动的每一个像素，你要么得到更高的值，要么得到更低的值。您的代码按预期工作。@cf或云正确，但我只想检测scrollTop值，而不是在每个滚动像素上触发动画。您可以使用延迟，仅每x秒获取一次值，或使用scrollTop差异，每x像素获取一次值。您可以使用类似于throttle的方法，然后需要一个阻塞变量。我写了一些代码。我认为这是交叉浏览器所需要的！Gecko使用与Webkit不同的元素来读取主体的滚动顶部。试试看。在最新的Chrome中，我的示例确实可以正常工作。不过，它在Firefox中不支持oposite。你应该在firefox中使用html。。。还不知道为什么。FF版本：使用窗口而不是正文或html。两者都很有魅力；>200工作正常，但当<200检查窗口版本时，它不会返回动画。我真不敢相信这在最新的Chrome上还能正常工作：/。

var _top, _last_top = -1;
$(window).scroll(function() {
    _top = $('body, html').scrollTop();

    if(_top > 250 && _last_top < 250) {
        _last_top = _top;
        $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow');
    }

    if(_top < 250 && _last_top > 250) {
        _last_top = _top;
        $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow');
    }
});