Question

当滚动达到150px

时，我试图隐藏菜单

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/

看起来很有效但是当我回到顶部时，有时显示菜单的动画开始有点太晚，反之亦然。

造成这种情况的原因是什么？

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

我的动画卷轴滞后，为什么

1 个答案: