Javascript 返回顶部时，ScrollTop会出现犹豫

我试图在用户向下滚动时更改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

），然后等待大约一分钟来执行其余代码（用于

#main menu

和

#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

var用于防止非top动画在滚动时被触发数千次

如果希望在动画完成后添加/删除类，可以使用如下回调：

$('#mainMenu').animate({marginTop: '70px'},300, function() {
    $('#mainNav').removeClass("mainNavScroll");
});

您必须首先在每个动画上使用

stop（）

，因为滚动事件会被触发大量次，因此会阻塞您的系统。尝试

$（某物）.stop（）.animate（）您正在处理堆栈溢出（正如Peter Griffin所说：“这就是为什么他们这么叫它的原因”）