由于滚动重新启动功能导致的 jQuery 动画问题答案

【问题标题】：jQuery animation issues due to scrolling restarting the function由于滚动重新启动功能导致的 jQuery 动画问题
【发布时间】：2014-07-06 04:34:08
【问题描述】：

当用户向下滚动时，导航栏滑入时出现问题。我的代码有效 - 但是，如果您继续滚动（上下滚动，或非常快速地向下滚动），则条的移动速度非常慢，而不是应有的速度。我认为这是因为即使动画进行到一半，该函数也会自行重新启动，因此它必须移动一半的距离，但要保持与必须移动整个距离相同的时间。我发现了几种可能性，但它们都清除了我无法执行的动画队列，就好像我在向下动画完成之前滚动到顶部一样，导航栏仍然可见，即使它不应该。所以基本上我希望导航栏顺利滑入，即使我继续向下滚动，但需要有一些东西阻止我滚动到顶部，导航栏仍然可见。谢谢

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

【问题讨论】：

当滚动到达动画点时需要设置一些标志，并且只做一次动画。
@adeneo 非常感谢我现在知道了
@VotetoClose 为我摆脱了流畅的动画。感谢您的帮助，但我现在已经修好了

标签： javascript jquery scroll jquery-animate

【解决方案1】：

由于动画只需要运行一次，我创建了一个名为 position 的变量，它限制“向下动画”多次运行，直到调用“向上动画”，反之亦然。感谢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;
        }
    });
});

【讨论】：