Question

我有以下jQuery代码：

if($(window).scrollTop()>=220) {
                    $('#header nav').slideUp('fast').removeClass('fixed');
                } else {
                    $('#header nav').addClass('fixed').slideDown('fast');
                }

当用户向下滚动超过220像素的页面时，标题将获得固定类，然后向下滑动。当用户再次向上移动时，标题将向上滑动并删除其固定类。用户将永远不会看到标题移回其原始位置，因为它在大约180像素处完成，因此不在屏幕上。

然而问题是当用户滚动时它会反复滑动，这不是我想要的。我看过停止方法，但停止当前的动画也不是我需要的..关于如何解决这个问题的想法？

上面的代码就是这样一个函数：

$(window).scroll(function() {
                    fixedHeader();
                });

Answer 1

您想要更改if($(window).scrollTop()>=220) {行，以检查用户是否已从0-220转换为220+或反转，而不是每次使用滚轮。

包含大量评论的示例教程可以是found here.

Answer 2

这样做可以解决问题：

if(!$('#header nav').hasClass('fixed')) {
                        $('#header nav').addClass('fixed').slideDown('fast');
                    }

Answer 3

此资源可能会对您有所帮助：Scroll Activated slide Down

$(function() {
    var bar = $('#headerSlideContainer');
    var top = bar.css('top');
    $(window).scroll(function() {
        if($(this).scrollTop() > 50) {
            bar.stop().animate({'top' : '0px'}, 500);
        } else {
            bar.stop().animate({'top' : top}, 500);
        }
    });
});

Answer 4

尝试这样的事情，它对我有用。

<SCRIPT>
$(document).ready(function() {

var div = $('#header');
var start = $(div).offset().top;

$.event.add(window, "scroll", function() {
    var p = $(window).scrollTop();
    $(div).css('position',((p)>start) ? 'fixed' : 'static');
    $(div).css('top',((p)>start) ? '0px' : '');
});

});
</SCRIPT>

取自 Fixed Header

jQuery：当用户滚过一个点时滑动标题

4 个答案: