jQuery

スクロール時に要素が画面内に入ったらclass付与する

今回はスクロール時に要素が画面内に入ったらクラス付与する方法をご紹介します。

jQueryでclassを付与し、cssでスタイル変更することで簡単にスクロールアクションを作成できます。
※jQueryを使用するので、実際に使用する際はjQueryを読み込んでください。

コードはこちら

// 要素が画面内に入ったらclass付与
$(window).scroll(function () {
  $('.effect').each(function () {
    var hit = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var wHeight = $(window).height();
    var customTop = 100;
    if (typeof $(this).data('effect') !== 'undefined') {
      // data-effect="任意の値" が設定されている場合
      customTop = $(this).data('effect');
    }
    if (hit + customTop < wHeight + scroll) {
      $(this).addClass("is-active");
    }
  });
});

簡単にコードの解説

 $('.effect').each(function () {
})

effectと名前のついたclassを探しています。

var customTop = 100;

要素がどのくらいの高さまで表示されたらクラス付与するかの値。
デフォルトでは100px

if (typeof $(this).data('effect') !== 'undefined') {
  // data-effect="任意の値" が設定されている場合
  customTop = $(this).data('effect');
}

effectクラスがついた要素に、data-effect=”任意の値”を指定してあげることで、costomTopにdata属性に指定した値が代入されるため、要素ごとにclass付与する高さを変更できる。


例）data-effect=”200″　要素が200px表示されたらclass付与

最後に

結構汎用性が高く、使いやすいと思いますので、
是非ご活用ください！！

関連記事

Follow