Javascript window.scroll不是即时动画

我试图检测用户何时在页面上向下滚动，以便设置div高度的动画。当用户位于页面顶部时#标题为100px，一旦他们滚动，标题就变成50px。这是我的密码：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 10) {
       $('#header').animate({height: "50px"});
    } else {
       $('#header').animate({height: "100px"});
    }
});

上面的操作是有效的，但是当用户滚动回到顶部时，在高度动画发生之前会有一个轻微的延迟

---

有什么想法吗？

我想默认的持续时间是400ms，可能是因为视觉延迟。您是否尝试过不设置高度动画，而是通过

.css（'height'，'50px'）

进行设置

---

至少这会告诉您是animate（）调用导致延迟，还是window.scroll事件处理程序…

window onscroll被多次调用，因此您会多次触发animate。这会导致多个动画同时运行。在触发下一个动画之前，需要使用stop（）取消上一个动画

$(window).scroll(function() {    
    var scrollTop = $(this).scrollTop();
    var height = (scrollTop >= 10) ? "50px" : "100px";
    $('#header').stop().animate({height: height});
});

---

现在，您可以做的另一件事是跟踪最后一个高度，如果

.is（'：animated'）

正在运行，那么就不用麻烦再次调用它了。它仍然需要

.stop（）

供参考：您多次调用animate，以便将动画设置到相同的高度。您需要使用

.stop（）

或选中

.is（':animated'）

谢谢。stop（）尝试了.css而不是.animate，它成功了。但那不是我想要的。