Question

我正在制作一个保留在页面顶部的导航栏。当用户向下滚动时，此栏会缩小，当用户返回页面顶部时，导航栏将返回其原始尺寸。

问题：当用户向下滚动时，导航栏会按预期收缩。但是，如果用户快速回滚到页面顶部，导航栏将保持缩小状态，并且几秒钟后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');});
    }
});

Answer 1

（发表评论作为答案）

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

Answer 2

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

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

要更好地了解stop（），请点击链接http://api.jquery.com/stop/。希望它有所帮助

animate（）没有足够快地更新

2 个答案: