0

jQuery を使用して、ヘッダー div をスクロールしたときに固定 (位置: 固定) にしています。

私が使用していたコードは次のとおりです。

    $(window).scroll(function() {
    var y = $(this).scrollTop();

    if (y >= 200) {
        $('.top').addClass('sticky');
    } else {
        $('.top').removeClass('sticky');
    }
});

ただし、UXが少し足りないと思います。私は jQuery UI をいじり始めました — 私はサイトの他の場所で使用しているので、既に含まれています — ここで私は問題に遭遇しています:

$(window).scroll(function() {
    var y = $(this).scrollTop();

    if (y >= 200) {
        $('.top').toggle('fade', 200, function() {
            $('.top').addClass('sticky', function() {
                $('.top').toggle('fade', 200);
            });
        });
    } else {
        $('.top').removeClass('sticky');
    }
});

私が望む動作は、div がフェードアウトし、スティッキーになり、フェードインすることです。

それは問題なくトリガーしますが、点滅し続けます。フェードを何度も切り替えます。

意図した動作を実現する方法について誰かがヒントをくれませんか? 過去にスクロールしたら登録したいのですが、スクロール位置を常に聞いているようです。

ありがとうございました。

4

1 に答える 1

1

スクロールするとアニメーションが常にトリガーされるため、アニメーションがキューに入れられ、状態がトグルし続けることが起こっていると思います。最終的に、アニメーションはスクロールされた距離によって決定される期間で停止します。

そのため、アニメーションを中断する必要があります。

var y = $(this).scrollTop();

if (y >= 200) {        
    $('.top')
        .stop(true, true)
        .fadeOut(200).delay(200)
        .fadeIn(200).addClass('sticky');
} else {
    $('.top').removeClass('sticky');
}

jQuery.stop ()

ここにデモがあります

于 2013-06-15T22:06:09.030 に答える