[js基礎⑦]スクロールしたらヘッダーの色が変わる実装

スクロールしたらヘッダーの色が変化する実装をしたい。

今日はサイト制作でよく出てくる、
画面をスクロールしたらヘッダーの色が変化する実装についてです。

初見だと少し難しく感じますが、意外とシンプルに実装できます。

実装例

早速実際のコードです。
Resultタブから動作を確認できます。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

スクロールするとヘッダーの色が赤色に変わります。

ざっくりとした流れは、下記です。
①jsで100pxまでスクロールすると.headerに「is-scroll」というクラスをつける
②cssに is-scrollが付いた場合に赤色に変更する指定をする。

解説

次に詳しく解説していきます。

①jsで100pxまでスクロールすると.headerに「is-scroll」というクラスをつける

const header = document.querySelector('.header');
const scrollposition = 100; // 特定のスクロール位置を指定

window.addEventListener('scroll', () => {
  if (window.scrollY > scrollposition) {
    header.classList.add('is-scroll'); // クラスを追加
  } else {
    header.classList.remove('is-scroll'); // クラスを削除
  }
});

scrollイベントを使い、画面をスクロールさせるたびに{}の中の処理が動くようにします。

if文の中で、もしも縦方向のスクロール量(window.scrollY)がscrollposition(100px)よりも大きい場合は
headerに「is-scroll」をつける。

反対の場合は「is-scroll」を外す。

②cssに is-scrollが付いた場合に赤色に変更する指定をする。
cssでは下記の部分で、is-scrollがついてる時にredを指定することで色を変化させます。
またheaderにtransitionをつけることで、ふわっとした変化にしています。

.header.is-scroll {
  background: red; /* スクロール時の色 */
}

.header {
  transition: background-color 0.3s ease; /* 色の変更をスムーズに */
}

以上で、スクロールするとヘッダーの色が変化する実装が実現できます。

まとめ

今回はスクロールしたらヘッダーの色が変わる実装について解説しました。

処理の流れはこんな感じです。
①jsで100pxまでスクロールすると.headerに「is-scroll」というクラスをつける
②cssに is-scrollが付いた場合に赤色に変更する指定をする。

仕組みがわかればシンプルな実装なので、ぜひ参考にしてみてください。

もしも質問などあれば、コメント欄かXのDMよりお気軽にご連絡ください。

Tweets by yuhi1321