jQuery スクロールしたらクラスを付与する方法

jQuery スクロールしたらクラスを付与する方法を紹介します。
例えば、スクロール後にヘッダーを固定したい時に便利な方法です。

1. スクロールしたらクラスを付与する方法
   1. コードの解説

スクロールしたらクラスを付与する方法

スクロールしたらクラスを付与する場合は scroll イベントを利用します。
例えば、ページ上部から 20px スクロールした場合に、#header 要素にクラス「fixed」を付与する場合は、次のコードを追加します。

$(window).scroll(function () {

  if($(window).scrollTop() > 20) {

    $('#header').addClass('fixed');

  } else {

    $('#header').removeClass('fixed');

  }

});

上記のコードは jQuery 単体のコードになります。
jquery.min.js などは別途任意で読み込んでください。

コードの解説

まずは、スクロールしたら処理が始まるようにイベントを定義。

$(window).scroll(function () {

-- 省略 --

続いて、if文で指定した値とスクロール量を比較、その値をみてクラスを付与、またはクラスの削除を実行します。

-- 省略 --

  if($(window).scrollTop() > 20) {

    $('.header').addClass('fixed');

  } else {

    $('.header').removeClass('fixed');

  }

-- 省略 --

まとめ

jQuery スクロールしたらクラスを付与する方法を紹介しました。