Question

如果正文的.scroll()高于特定值，我确实有一个简单的.scrollTop()函数来触发事件：

$(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值激发动画。

我怎样才能以最佳方式解决这个问题？

由于

Answer 1

试试这个

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');
    }
});

Answer 2

这是因为您在函数中从scrollTop和body获得了html个值。根据浏览器的不同，这会给您带来一些不可预知的结果。您应该获得scrollTop的{{1}}值。

body

http://jsfiddle.net/xxs82dsk/

修改：明显获得$(window).scroll(function() { console.log($('body').scrollTop()); if($('body').scrollTop() > 250) { console.log("higher"); $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); } else { console.log("lower"); $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); } }); scrollTop值可以解决跨浏览器的问题。适合我在FF和Chrome中使用：

window

http://jsfiddle.net/ushopako/

Answer 3

使用阻止变量，这应该有效。

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;
    }
});

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

3 个答案: