ページをスクロールしたら表示させたいor非表示にしたい。そんな時のためのjsをメモ。

スクロールしてヘッダーの背景に色をつけてみる

headerタグにクラス .bg_white をつけて背景を白にしよう。

.bg_white{
  background:white;
}

$(document).ready(function(){
  $(window).scroll(function() {
    if($(this).scrollTop() > 100) { 
      $("header").addClass("bg_white"); 
    } else {
      $("header").removeClass("bg_white");
    }
  });
});

やったこと

• 画面TOPからのスクロールの距離を if($(this).scrollTop() > 100) で判定
• 画面TOPから100以上移動していたら .addClass(“bg_white”) でクラスを付与
• 画面TOPから100以下の移動の時は .removeClass(“bg_white”) でクラスをはずす

アレンジ次第でいろんな使い方が出来ます。