javascript - スクロール時に要素にクラスを追加

Question

ユーザーが最初にページの上部からスクロールして離れるときに、要素にクラスを追加したいと思います。その後、ユーザーが上にスクロールしてページの上部に到達した場合、そのクラスを削除したいと思います。

ソリューションでのjQueryの使用は問題ありません。

Answer 1

試す

$(window).scroll(function() {    

    $("id or class").removeClass("active");

    var scroll = $(window).scrollTop();

    if (scroll <= 500) {
        $("#one").addClass("active");
    }
    else if (scroll <= 1000) {
        $("#tow").addClass("active");
    }
    else {
        $("#three").addClass("active");
    }
}

Answer 2

だからここにあなたが探している解決策があります。divタグでカスタマイズするだけです。

$(document).ready(function () {
    $(window).scroll(function(){
      // get the height of #wrap
      var h = $('#top').height();
      var y = $(window).scrollTop();

      if( y > (h*.25) ){

       $("#sidef").fadeIn(1100);
      } else {
       $('#sidef').fadeOut(75);
      }
     });
      });

Answer 3

var notAdded = true;
$(window).scroll(function(){
  if(  $(this).scrollTop() == 0){
       $(elem).removeClass('classname');
       notAdded = true;
  }
  else if(notAdded){
     $(elem).addClass('classname');
       notAdded  = false;
 }
});