jQuery动画问题由于滚动重新启动的功能

jQuery animation issues due to scrolling restarting the function

本文关键字：滚动 重新启动 功能 动画 问题 于滚动 jQuery      更新时间：2023-09-26

当用户向下滚动时，我遇到了一个导航条滑动的问题。我的代码可以工作——但是如果你一直滚动(上下滚动，或者非常快速地向下滚动)，这个工具条的移动速度真的很慢，而不是它应该达到的速度。我认为这是因为即使在动画进行到一半的时候，函数也会重新开始，所以它必须移动一半的距离，但保持相同的时间，就好像它必须移动整个距离一样。我发现了几种可能性，但它们都清除了动画队列，我不能这样做，如果我在动画完成之前滚动到顶部，导航栏仍然是可见的，即使它不应该。所以基本上我想要导航条平滑滑动，即使我一直向下滚动，但需要有一些东西阻止我滚动到顶部，而导航条仍然可见。由于

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

由于动画只需要运行一次，我创建了一个名为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;
        }
    });
});
相关文章：