Question

我正在尝试更改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");
    }
});

它代码的顶部（第一个＆＃34; if＆＃34;部分）很好但是当我向后滚动到顶部时，我遇到了问题＆＃34; else＆＃34;码。它会立即执行最后一行（从.mainNavScroll中移除#mainNav），然后等待大约一分钟来执行其余代码（#mainMenu和#phoneNumber的动画）。

Answer 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 var是为了防止在滚动时触发非顶级动画数千次。

如果你想在动画完成后添加/删除这个类，你可以使用这样的回调：

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

ScrollTop在回到顶部时犹豫不决

1 个答案: