javascript - animate() 更新速度不够快

Question

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

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

为了调试它，我加入了 console.log($(window).scrollTop()); 来告诉我用户在页面上的当前位置。当用户滚动时，我得到 console.log 输出。 但是 {console.log('animated'); 应该在动画完成时触发，直到 console.log 几秒后才出现。 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() 在开始新动画之前停止任何正在进行的动画。