2024.07.07

スクロールをしたら特定の要素にクラスを追加する方法【HTML・CSS・jQuery】

ken-admin-suto

こんにちは！けんです。

スクロールをすることで特定の要素にクラスを追加する方法

この記事では、上記の内容をご紹介致します。

実装後の表示画面

まずは、実装後の表示画面を見ていきましょう。

See the Pen スクロールで特定の要素にクラスを追加する方法 by ken (@kensuto) on CodePen.

上記、スクロールすることで、

「テキスト」部分　文字色：白　背景：黒　になりました。

実装の流れ

続いて実装の流れを見ていきましょう。

・HTML

1<section>
2    <p class="text">テキスト</p>
3</section>

・CSS

15行目に注目。

“text”のクラスに”add”のクラスを追加することで、文字を白く・背景を黒くします。

1section {
2  height: 5000px;
3}
4
5.text {
6  width: 95%;
7  font-size: 20px;
8  text-align: center;
9  padding: 30px 0;
10  position: fixed;
11  font-weight: bold;
12}
13
14/* 注目 */
15.text.add {
16  background-color: #000;
17  color: #fff;
18}

・JS

下記のコードを記載しましょう。

コードの内容：100px以上スクロールすることで、”text”のクラスに”add”のクラスを追加します。

1// スクロールでクラス付与
2$(window).on("scroll", function () {
3  if (100 < jQuery(this).scrollTop()) {
4    // 100px以上スクロールしたら
5    jQuery(".text").addClass("add");
6  } else {
7    jQuery(".text").removeClass("add");
8  }
9});