JQuery scrollTop 动画不需要的调用

Question

我正在开发一个小网页，我想在向下滚动时更改导航栏的背景颜色。

$(window).on("scroll", function() {
    if($(window).scrollTop()) {
        $('nav').animate({'background-color' : '#999999'}, 'slow');
        //$('nav').css("background-color","#cccccc");
    }
    else {
        $('nav').animate({'background-color' : '#eeeecc'}, 'slow');
        //$('nav').css("background-color","#eeeecc");
    }
})

当我滚动到顶部时，立即调用 if 语句，大约 10 秒后调用 else 语句。但是 else 语句应该立即执行。

如果我改用注释代码行，它会起作用。

Answer 1

有效的方法是使用停止函数:

$(window).on("scroll", function() {
    if($(window).scrollTop()) {
        $('nav').animate({'background-color' : '#999999'}, 'slow'); 
    }
    else {
        $('nav').stop(true,true);
        $('nav').animate({'background-color' : '#eeeecc'}, 'slow');
    }
})

但我不确定这是否是一个好的解决方案。