javascript - ページの先頭に到達したらクラスを削除しますか？

Question

次のスクリプトを使用して、ヘッダーに固定されたドロップシャドウと位置を追加しています。ただし、ユーザーが一番上までスクロールして戻ったときに、クラスを削除するにはどうすればよいですか？

ここに私のスクリプト：

$(function() {
 $(window).scroll(function() {
    var top_offset = $(window).scrollTop();
    if (top_offset) {
      $('.top_head_separator').addClass('fixed-top fade-in');
  }
});

スクロールバーが一番上にあるときにこれを逆にするにはどうすればよいですか？

score 5 · Accepted Answer

かどうかtop_offsetを確認し、そうであれば0使用removeClassします。

top_offset の値を示す jsFiddle

$(function () {
    $(window).scroll(function () {
        var top_offset = $(window).scrollTop();
        if (top_offset == 0) {
            $('.top_head_separator').removeClass('fixed-top fade-in');
        } else {
            $('.top_head_separator').addClass('fixed-top fade-in');
        }
    })
});

score 1 · Accepted Answer

$(function() {
 $(window).scroll(function() {
    var top_offset = $(window).scrollTop();
    if (top_offset === 0)
      $('.top_head_separator').addClass('fixed-top fade-in');
    else if (top_offset > 100) // or something else
      $('.top_head_separator').removeClass('fixed-top fade-in');
  }
});

score 0 · Accepted Answer

window.pageYOffset;現在のスクロール位置を取得するために使用します。
現在の位置が一番上かどうかを確認し、removeClassを使用します

javascript - ページの先頭に到達したらクラスを削除しますか？

3 に答える 3

Related

Reference