ScrollTop 返回顶部时有犹豫答案

【问题标题】：ScrollTop has hesitation when returning to topScrollTop 返回顶部时有犹豫
【发布时间】：2015-04-16 16:17:00
【问题描述】：

我正在尝试在用户向下滚动时更改 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 的动画）。

【问题讨论】：

您必须首先在每个动画上使用stop()，因为滚动事件被触发了很多次，因此会阻塞您的系统。试试$(something).stop().animate(); 你正在处理堆栈溢出（正如彼得格里芬所说：'这就是他们称之为'的原因'）

标签： javascript jquery css jquery-animate

【解决方案1】：

我想这就是你想要的：

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");
});

【讨论】：