1

我正在制作一个保留在页面顶部的导航栏。当用户向下滚动时，这个栏会缩小，当用户回到页面顶部时，导航栏会恢复到原来的尺寸。

问题：当用户向下滚动时，导航栏按预期缩小。但是，如果用户快速滚动回到页面顶部，导航栏仍然会缩小，并且回调函数animate()中的scrollTop()函数会在几秒钟后触发。

为了调试这个，我包括console.log($(window).scrollTop());告诉我用户在页面上的当前位置。console.log用户滚动时，我会尽快获得输出。但是 应该在动画完成时触发，直到输出{console.log('animated');后几秒钟后才会出现。console.log($(window).scrollTop());0

当用户向上滚动时，我怎样才能animate()快速响应？

JS代码

var navBar = $('#navbar-inner');
var top = navBar.css('top');
$(window).scroll(function() {
    console.log($(window).scrollTop());
    if($(this).scrollTop() > 50) {
        navBar.animate({'marginTop':'-20', 'height':'60'}, 300);
    } else {
        navBar.animate({'marginTop':'0', 'height':'80'}, 300, function() 
            {console.log('animated');});
    }
});
4

2 回答 2

1

（发表我的评论作为答案）

用于.stop()在开始新动画之前停止任何正在进行的动画。

于 2012-06-27T21:01:41.657 回答
0

我之前遇到过这种问题，动画的持续时间比用户操作的时间长。你只需要停止动画，比如

navBar.stop(true, true).animate(...);

为了更好地理解 stop() 这里是链接http://api.jquery.com/stop/。希望能帮助到你

于 2012-06-27T20:57:10.643 回答