gpt4 book ai didi

javascript - window.scroll 不是即时动画

转载 作者:行者123 更新时间:2023-12-02 17:53:53 25 4
gpt4 key购买 nike

我试图检测用户何时在页面上向下滚动,以便我可以为 div 的高度设置动画。当用户位于页面顶部时,#header 为 100px,一旦滚动,#header 就会变为 50px。这是我的代码:

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

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

上面的方法有效,但是当用户滚动回顶部时,在高度动画发生之前会有轻微的延迟。

有什么想法吗?

最佳答案

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

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

现在您可以做的另一件事是跟踪最后的高度,如果 .is(':animated') 正在运行,则不必再次调用它。它仍然需要 .stop()

关于javascript - window.scroll 不是即时动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21139020/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com