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 がフェードアウトし、スティッキーになり、フェードインすることです。
それは問題なくトリガーしますが、点滅し続けます。フェードを何度も切り替えます。
意図した動作を実現する方法について誰かがヒントをくれませんか? 過去にスクロールしたら登録したいのですが、スクロール位置を常に聞いているようです。
ありがとうございました。