2

我有以下 jQuery 代码：

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

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

然而问题是，当用户滚动时，它会一遍又一遍地滑动，这不是我想要的。我已经查看了停止方法，但停止当前动画也不是我需要的。关于如何解决这个问题的任何想法？

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

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

4 回答 4

0

此资源可能对您有所帮助：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);
        }
    });
});
于 2013-09-12T14:13:18.640 回答
0

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

可以在此处找到包含大量评论的示例教程。

于 2012-05-25T10:27:57.347 回答
0

这样做可以解决问题：

if(!$('#header nav').hasClass('fixed')) {
                        $('#header nav').addClass('fixed').slideDown('fast');
                    }
于 2012-05-25T10:40:38.387 回答
-1

试试这样的东西，它对我有用。

<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>

取自 固定页眉

于 2012-05-25T10:21:09.550 回答