【jQuery】スクロールでクラス追加する方法を解説

今回はjQueryで一定量スクロールをしたときにクラス追加する方法を紹介します。少しスクロールしたら追従するメニューを表示したいときなどに便利です。

コード紹介・解説

$(window).scroll(function () {
  if($(window).scrollTop() > 20) {
    $('.dammy').addClass('sample');
  } else {
    $('.dammy').removeClass('sample');
  }
});

実際のコードはこちらになります。画面一番上から20pxいくとでdammyクラスの要素にsampleを追加するイメージです。また画面最上部に戻ったときはsampleを外すイメージです。このあたり不要な場合は外してください。

実際に使ってみる

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

使い方の一例ですが、こんな感じを想定してます。クラス付け外しで表示・非表示を切り替えを実装しています。

transtionを指定することでふわっと表示するのが個人的な好みです。

コーディングでお困りなら、、、

コーディングの実装でお困りの場合は　https://coding-shop.net/contact/　こちらよりお問い合わせください。

コーディングの委託も承っております。お仕事に関するお問い合わせも上記リンクよりお気軽にご連絡ください。