【JavaScript】スクロール位置に合わせてCSSを変える方法

サンプル

まずはサンプルを確認ください。

スクロール位置に応じて、ヘッダーの背景色が変化します。

See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.

解説

スクロールイベントが発生するたびに現在のスクロール位置を取得し、スクロール位置によってCSSを変更しています。

HTML要素の作成

ヘッダーだけのシンプルなHTMLを作成します。

後述のJavaScript処理で必要になるため、idを指定しておきます。

<div id="header">Header</div>

デフォルトのCSSスタイルの設定

続いてCSSを設定します。

スクロールできる高さを確保するためにbodyに高さを持たせました。

また、ヘッダーのデフォルトの背景色を設定します。
transition: background-color 0.3sは背景色が変化するときに0.3秒の時間をかけて変化するようになります。

body {
  height: 1000px; /* スクロールできる高さ */
}
#header {
  background-color: blue;
  transition: background-color 0.3s;
}

スクロール位置に応じてCSSを変える処理を定義

最後にJavaScript処理を書いていきます。

はじめにスタイルを変更したい要素を取得しておきます。

const header = document.getElementById('header'); // スタイルを変更したい要素を取得

次にdocument.addEventListenerのイベントの種類にscrollを指定して、スクロール時にイベントが呼ばれるするようにします。

スクロールイベントが発火したら現在のスクロール位置を取得します。

const scrollPosition = window.scrollY; // 現在のスクロール位置を取得

先ほど取得したスクロール位置に応じて、背景色を変える処理を作ります。

if (scrollPosition > 500) {
    header.style.backgroundColor = 'red'; // 背景色を赤に変更
} else if (scrollPosition > 200) {
    header.style.backgroundColor = 'green'; // 背景色を緑に変更
} else {
    header.style.backgroundColor = 'blue'; // 背景色を青に戻す
}

応用編

ここからはスクロールイベントでCSSスタイルを適用する少し高度な例を紹介します。

以下はページの各セクションに異なる背景色を適用するサンプルです。

See the Pen scroll-change-css-1 by Usagi (@naniwa_usagi) on CodePen.

ポイントはスクロール位置の取得方法です。
画面の高さとスクロール位置を求めて、現在表示されている画面の中央の高さを求めています。

const scrollPosition = window.scrollY + window.innerHeight / 2; // 中心位置を基準にする

次にポイントとなるのは、各セクションの位置の取得方法です。
JavaScriptで要素の位置を取得するためのプロパティであるoffsetTopは存在しますがoffsetBottomは存在しないため、
offsetTopにセクションの高さを合わせてセクションの底辺の位置を求めています。

const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;

スクロール位置と各セクションの位置関係を求められたら、スクロール位置がどのセクションの範囲内であるかを判定し、
条件に当てはまる場合に対象の要素のCSSを変更します。

if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight)