2020.10.19  2021.04.04

JavaScriptを使ってスクロール量に応じてHTML要素にclassをつける方法

皆さんこんにちは!マコブログです!

今回は、jQueryを使用して、スクロール量に応じてHTML要素にclass名を付ける方法を紹介します!

言葉での説明では分かりづらいと思いますので、実際のコードを見て解説を加えていきます。



今回はスクロール関数を使用していきたいと思います。

実際のコード

// スクロール 処理
$(window).scroll(function () {
    //スクロール時に一度だけ行う処理
     //600px以上の場合
     if (window.matchMedia('(min-width: 600px)').matches) {
       $('.fade-in').each(function () {
       var position = $(this).offset().top
       var scroll = $(window).scrollTop() //スクロールした量を計測して変数に代入
       var windowHeight = $(window).height() //ウィンドウの高さを取得して代入する
       if (scroll > position - windowHeight + 150) { //スクロールした分>(下から出す要素の高さ-ウィンドウの高さ)+位置の調整
       $(this).addClass('active') //超過したときに該当のクラスにstopを追加
       }
     })
     } else {
     //600px以下の場合
     $('.fade-in').each(function () {
       var position = $(this).offset().top
       var scroll = $(window).scrollTop() //スクロールした量を計測して変数に代入
       var windowHeight = $(window).height() //ウィンドウの高さを取得して代入する
       if (scroll > position - windowHeight + 50) { //スクロールした分>(下から出す要素の高さ-ウィンドウの高さ)+位置の調整
       $(this).addClass('active') //超過したときに該当のクラスにstopを追加
       }
     })
     }
})

コードの解説

それでは、解説を始めます!

先ほども言いましたが、今回はjQueryのスクロール関数を使用しています。
$(window).scroll(function () {←初めのこれですね。
実際にユーザーがスクロールした際の関数なので、スクロールしなければ発火しません。



次に、スマホとパソコンの場合でjsをレスポンシブ対応させましょう。
if (window.matchMedia('(min-width: 600px)').matches) {←これです!
window.matchMediaは、閲覧しているサイトの横幅を認識できるものです。
そこに'(min-width: 600px)’を加えることで、600pxよりも大きいとき、という条件を与え、これをpc表示とします。

sp表示はそのあとの記述をelseにすれば、指定せずとも600pxより小さい場合が適用されますね。

それでは本題の関数の中身を解説していきましょうか!

$(‘.fade-in’).each(function () {~ でスクロール関数の中にさらに関数を書いていきます。

var position = $(this).offset().top .offset().topは、画面の一番上(WEBサイトの頭)から、this(今回でいうfade-in)までの距離を測ってくれます。
それをposition に代入します。

var scroll = $(window).scrollTop() $(window).scrollTop()は、ユーザーのスクロール量をリアルタイムで取得してくれます。
これをscroll に代入します。

var windowHeight = $(window).height() $(window).height()は、ウィンドウの高さを取得してくれます。
これをwindowHeight に代入します。

これで下準備は整いました。実際のメインの処理を見ていきましょう。

if (scroll > position – windowHeight + 150) {~ ←スクロールした量が、(下から出す要素の高さ-ウィンドウの高さ)+位置の調整を上回ったら発火という処理を加えます。

大事なポイントなのでもう一度言います。
「スクロールした量が、(下から出す要素の高さ-ウィンドウの高さ)+位置の調整を上回ったら発火」です!
※難しいと思いますが、ここが一番大事です!



後は簡単で、 $(this).addClass(‘active’) this(今回でいうfade-in)にactiveというクラスをつけて完了です。

まとめ

いかがでしたか?

今回は、WEBサイトのスクロール量に応じてHTML要素にclass名を付ける方法を紹介しました。
こちらの記事も是非チェックしてみてください↓
jQueryプラグイン、spritespinを使って3D回転画像を実装する方法

今回の記事をよく読んで、あなたもチャレンジしてみてはいかがでしょうか?

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →