animate(） 更新速度不够快

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

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

为了调试它，我包含了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');});
    }
});