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 () & gt; =220) \ {/ code> 行以检查用户是否已从 0-220 过渡到 220 + 或逆向, 而不是使用每一个滚轮。



具有许多评论的教程的范例是

Answer 2

这样做解决了问题:

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

Answer 3

此资源也许可以帮助您 : < a href=" http:// return- true.com/2010/04/scroll- activated- sliide- down- header- with - jquery/" rel=" no follow" @ em> scroll 激活幻灯片下游

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

Taken from Fixed Header

友情链接