jQueryでスクロール量に応じてクラスを追加・削除する方法【JS/jQuery】

こんにちは！コーダーのゆうしです。

「ページを少しスクロールしたらヘッダーのデザインを変えたい」「スクロールしたら追従メニューをふわっと表示したい」という実装、コーディングでよく依頼される場面のひとつです。jQueryの scroll() イベントを使えばシンプルなコードで実現できます。この記事ではスクロール量に応じてクラスを追加・削除する方法を解説します。

表示イメージ
実装コード
コード解説
躓きやすいポイント
まとめ

表示イメージ

See the Pen スクロールでクラス追加 by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

実装コード

$(window).scroll(function () {
  if ($(window).scrollTop() > 20) {
    $('.target').addClass('is-active');
  } else {
    $('.target').removeClass('is-active');
  }
});

HTML

<div class="target">追従メニューなど</div>

CSS（表示切り替えの例）

.target {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.target.is-active {
  opacity: 1;
}

transition を指定しておくことで、クラスが付いたときにふわっと表示される動きになります。

コード解説

scrollTop()でスクロール量を取得する

$(window).scrollTop()

scrollTop() はページの一番上からのスクロール量をピクセルで返します。この値を条件分岐に使うことで「何px以上スクロールしたとき」という制御ができます。

クラスの追加と削除

$('.target').addClass('is-active');    // クラスを追加
$('.target').removeClass('is-active'); // クラスを削除

addClass() でクラスを追加、removeClass() でクラスを削除します。スクロール量が閾値を超えたらクラスを追加、ページ最上部に戻ったら削除する流れです。

閾値を変更する

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

20 の部分がスクロール量の閾値です。ここを変更することで発動するタイミングを調整できます。

応用：toggleClassで書く

addClass と removeClass を条件分岐で書く代わりに toggleClass を使うとコードをすっきり書けます。

$(window).scroll(function () {
  $('.target').toggleClass('is-active', $(window).scrollTop() > 20);
});

toggleClass の第二引数に真偽値を渡すことで、条件が true のときにクラスを追加、false のときに削除する動きになります。

応用：ヘッダーの背景色を変える

スクロールでヘッダーのデザインを切り替えたい場合の実装例です。ファーストビューでは画像全体を見せてスクロールを開始したらヘッダーに背景色を追加して見えやすいようにする、みたいなイメージです。

$(window).scroll(function () {
  if ($(window).scrollTop() > 50) {
    $('header').addClass('is-scrolled');
  } else {
    $('header').removeClass('is-scrolled');
  }
});

header {
  background: transparent;
  transition: background 0.3s ease;
}

header.is-scrolled {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

透明だったヘッダーが、スクロールすると白背景＋影つきに切り替わる実装です。トップページのビジュアルエリアを抜けたタイミングでヘッダーを変えたいときによく使います。