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

これを行うと、問題が修正されます。

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

if($(window).scrollTop()>=220) {すべてのスクロール ホイールが使用されるのではなく、ユーザーが 0-220 から 220+ またはその逆に遷移したかどうかをチェックするように行を変更します。

多くのコメントを含むチュートリアルの例は、こちらにあります。

于 2012-05-25T10:27:57.347 に答える
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 に答える
-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 に答える