スクロールに合わせて要素の色を変更する方法

Web制作

2021.07.30

2026.08.18

ファーストビューが黒系で下にあるコンテンツ背景が白系みたいな場合、要素の色などを背景に合わせて変更したいというときがあります。

CSSのmix-blend-modeプロパティなんかもあるのですが、いざ使ってみるとしっくり来なかったりすることがわりとあります。

ということで今回は、JavaScriptでスクロールによってクラス付加→色変更という方法をご紹介します。

スクロールに合わせて要素の色を変更する方法

まずはCSSで元の色とスクロール後の色を指定しておきます。

「#logo」という要素に「.invert」というクラスが付くと色が変わります。

CSS

#logo {
	background: #fefefe; /* 元の色 */
}

#logo.invert {
	background: #111111; /* スクロール後の色 */
}

スクロール位置が任意の場所を越えたら色を変更する

スクロール位置が任意の場所（ここでは500px）を越えたら「#logo」に「.invert」を付加します。

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const logo = document.querySelector("#logo");

  window.addEventListener("scroll", function () {
    if (window.scrollY > 500) {
      // スクロールが500pxを越えたら
      logo.classList.add("invert");
    } else {
      // スクロールが500pxを越えなければ
      logo.classList.remove("invert");
    }
  });
});

スクロール位置がウィンドウの高さを越えたら色を変更する

ファーストビューが全画面表示の場合はウィンドウの高さを取得して、そこを超えたら「#logo」に「.invert」が付くようにします。

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const logo = document.querySelector("#logo");
  const height = window.innerHeight; // ウィンドウの高さ

  window.addEventListener("scroll", function () {
    if (window.scrollY > height) {
      // スクロールが画面の高さを越えたら
      logo.classList.add("invert");
    } else {
      // スクロールが画面の高さを越えなければ
      logo.classList.remove("invert");
    }
  });
});

レスポンシブにしてみる

レスポンシブデザインの場合、レイアウトによってファーストビューの高さが変わることもあります。

その場合には、ウィンドウ幅によって色が変わるスクロール位置を切り替えます。

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const logo = document.querySelector("#logo");
  const height = window.innerHeight;
  const w = window.innerWidth; // ウィンドウの幅
  const x = 960; // タブレットの画面幅
  const y = 560; // スマホの画面幅

  let threshold;

  if (w > x) {
    // 画面幅が961px以上のとき
    threshold = height;
  } else if (x >= w && w > y) {
    // 画面幅が561px以上960px以下のとき
    threshold = 500;
  } else {
    // 画面幅が560px以下のとき
    threshold = 250;
  }

  window.addEventListener("scroll", function () {
    if (window.scrollY > threshold) {
      logo.classList.add("invert");
    } else {
      logo.classList.remove("invert");
    }
  });
});