我的动画滚动滞后，为什么答案

【问题标题】：My animation scroll is lagging, why我的动画滚动滞后，为什么
【发布时间】：2017-03-25 23:36:30
【问题描述】：

我试图在滚动达到 150 像素时隐藏菜单

HTML：

<html>
<body style="height:2000px">
    <div id="header">
    </div>
</body>
</html>

CSS：

#header{height:200px; background:#000; position:fixed; top:0; width:100%;}

JS：

$(function(){
    $(window).bind('scroll', function(){
        if($(this).scrollTop() >= 150) {
            $('#header').attr('data-open','open');
        }
        if($(this).scrollTop() >= 150 && $('#header').attr('data-open') == 'open'){
            $("#header").animate({top:'-180px'},500, 'linear').attr('data-open','open');
        }else{
            $("#header").animate({top:'0'},500, 'linear').removeAttr('data-open');
        }
    });
});

演示：http://jsfiddle.net/egZ6H/1/

它似乎有效，但是当我回到顶部时，有时显示菜单的动画开始有点太晚了，反之亦然。

是什么原因造成的？

【问题讨论】：

标签： jquery html css animation

【解决方案1】：

您需要在每次动画调用之前调用.stop()，以确保它不会等到完成最后一个动画才开始此动画。

见updated jsFiddle。

代码是：

$(function(){
    $(window).bind('scroll', function(){
        if($(this).scrollTop() >= 150) {
            $('#header').data('open','open');
        }
        if($(this).scrollTop() >= 150 && $('#header').data('open') == 'open'){
            $("#header").stop().animate({top:'-180px'},500, 'linear').data('open','open');
        }else{
            $("#header").stop().animate({top:'0'},500, 'linear').data('open', null);
        }
    });
});

【讨论】：