我正在尝试在用户向下滚动时更改 css 样式,并将它们设置回用户滚动回顶部时的状态。
$(window).on( 'scroll', function(){
if ($(window).scrollTop() > 0) {
$('#mainMenu').animate({marginTop: '15px'},300);
$('#phoneNumber').animate({opacity: '0'},300);
$('#mainNav').addClass("mainNavScroll");
} else {
$('#mainMenu').animate({marginTop: '70px'},300);
$('#phoneNumber').animate({opacity: '1'},300);
$('#mainNav').removeClass("mainNavScroll");
}
});
它执行代码的顶部(第一个“if”部分)很好,但是当我向上滚动到顶部时,“else”代码出现问题。它立即执行最后一行(从 #mainNav
中删除 .mainNavScroll
),然后等待大约一分钟来执行其余代码(#mainMenu 的动画)
和 #phoneNumber
)。
最佳答案
我想这就是你想要的:
var top = true;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() > 0) {
if (top) {
top = false;
$('#mainMenu').stop().animate({marginTop: '15px'},300);
$('#phoneNumber').stop().animate({opacity: '0'},300);
$('#mainNav').stop().addClass("mainNavScroll");
}
} else if (!top) {
top = true;
$('#mainMenu').animate({marginTop: '70px'},300);
$('#phoneNumber').animate({opacity: '1'},300);
$('#mainNav').removeClass("mainNavScroll");
}
});
.stop()
将在运行下一个动画之前停止当前正在运行的任何动画。这将防止动画相互等待的队列。
top
变量用于防止非顶部动画在滚动时被触发数千次。
如果你想在动画完成后添加/删除类,你可以使用这样的回调:
$('#mainMenu').animate({marginTop: '70px'},300, function() {
$('#mainNav').removeClass("mainNavScroll");
});
关于javascript - ScrollTop回到顶部时有犹豫,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29680500/