Javascript jQuery对scrollTop（）的响应缓慢

我一直在尝试调整高度导航，如下所示：

正如在JSFIDLE上看到的，我已经非常接近了：

这里导航

项目1
项目2
项目3

$（窗口）。滚动（函数（）{
if（$（文档）.scrollTop（）==0）{
$（'#nav.header'）。动画（{height:'140px'}，500）；
$（'ul.right'）.animate（{'line-height'：'140px'}，500）；
}否则{
$（#nav.header'）.animate（{height:'40px'}，500）；
$（'ul.right'）.animate（{'line-height'：'40px'}，500）；
}
});

---

当您向下滚动动画时，效果非常好，但是，当您向后滚动到页面顶部时，更新并运行else语句大约需要10秒钟。要使该操作实时更快地发生，我缺少什么？

问题是

.animate（）

每次调用队列时都会将其添加到队列中。因此，当您从顶部滚动时，将为每个滚动事件向动画队列添加另一个动画。然后，当您回到顶部时，

.animate（{height:'140px'}，500）

动画将添加到队列的末尾，这意味着只有在所有其他动画都发生后（每个动画都需要500毫秒）才会发生。当然，您看不到这些其他动画发生，因为您告诉jQuery将动画设置为它们已经具有的值，因此在视觉上不会发生任何事情

尝试：

---

哇！非常感谢您的快速回复。我很感谢您对.animate（）的解释。你能快速解释一下为什么你先创建了一个var，然后使用console.log吗？@bradmagnus哦，你可以忽略

console.log

-我只是在玩它的时候使用它。至于

top

变量，我使用它来跟踪滚动位置以前是否在顶部。这样我就知道它是否需要动画了。@bradmagnus同样，看看你链接到的那个网站，我认为它们的效果实际上更接近这个：哦，是的，我不知道为什么我不认识“console.log”！我只是在阅读和比较我以前的。。。我想我得到了‘var’，它在页面改变位置的任何时候都会被输入一个新的值，然后正确吗？谢谢你在另一个提琴上付出的额外努力！这不是我目前正在寻找的，我目前正在工作的网站，但非常方便！我肯定会把它放在书签里。

<div id="nav" class="header">
nav here
<ul class="right">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
</div>

$(window).scroll(function () {
if ($(document).scrollTop() === 0) {
    $('#nav.header').animate({height:'140px'}, 500);
    $('ul.right').animate({'line-height':'140px'}, 500);
} else {
    $('#nav.header').animate({height:'40px'}, 500);
    $('ul.right').animate({'line-height':'40px'}, 500);
}
});

var atTop = !$(document).scrollTop();

$(window).scroll(function () {

    if ($(document).scrollTop() === 0 && !atTop) {

        $('#nav.header').animate({height:'140px'}, 500);
        $('ul.right').animate({'line-height':'140px'}, 500);

        atTop = true;

    } else if (atTop) {

        $('#nav.header').animate({height:'40px'}, 500);
        $('ul.right').animate({'line-height':'40px'}, 500);

        atTop = false;

    }
});