由于滚动重新启动函数而导致的jQuery动画问题

Question

当用户向下滚动时，我有一个导航条滑入的问题。我的代码可以工作--但是如果你继续滚动(上下滚动，或者非常快地向下滚动)，条形图的移动速度会很慢，而不是它应该达到的速度。我认为这是因为这个函数重新启动，即使它是在动画的一半，所以它必须移动一半的距离，但保持相同的时间，就好像它要走的整个距离。我发现了一些可能性，但它们都清除了动画队列，我不能这样做，如果我滚动到顶部之前，向下的动画已经完成，导航条仍将是可见的，即使它不应该。因此，基本上我希望导航条顺利地滑入，即使我继续滚动下来，但需要有一些东西阻止我滚动到顶部，导航条仍然可见。谢谢

JSFiddle：

http://jsfiddle.net/bhaZ6/8/

我的代码：

jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#nav').stop(true).animate({'top': '0'}, duration, 'linear');
        } else {
            jQuery('#nav').stop(true).animate({'top': '-72px'}, duration, 'linear');
        }
    });
});

Answer 1

因为动画只需要运行一次，所以我创建了一个名为position的变量，该变量限制“down”动画多次运行，直到一个“up”动画被调用和副vera为止。感谢adeno的想法

jQuery(document).ready(function() {
    var offset = 220;
    var duration = 300;
    var position = 'up';

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset && position === 'up') {
            jQuery('#nav').stop(true).animate({'top': '0'}, duration, 'linear');
            position = 'down';
        } else if (jQuery(this).scrollTop() < offset && position === 'down'){
            jQuery('#nav').stop(true).animate({'top': '-72px'}, duration, 'linear');
            position = 'up';
        } else {
            return;
        }
    });
});