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 スクロールしたらクラスを付与する方法を紹介しました。