MENU

スクロールによって、背景色を変更

2024年6月5日

目次

できること

スクロールによって、背景色を変更するコードです。

要素のクラス名やbodyの箇所を変更することで、

「特定の箇所をスクロールしている間、特定の箇所を変更」できます。

スクロール　（class=”content1″）

条件

クラス名がcontent1の要素をスクロールしている間: 背景色を「黒」、文字色を「白」
スクロールが終わると: 背景色を「黒」、文字色を「白」

コード

<div class="content1">
</div>

document.addEventListener("DOMContentLoaded", function() {
  const content1 = document.querySelector(".content1");
  const scrollThresholdStart = 100; // 変化が始まるスクロールの閾値
  const scrollThresholdEnd = 100; // 変化が終わるスクロールの閾値

  window.addEventListener("scroll", function() {
    const scrollPosition = window.scrollY;
    const body = document.querySelector("body");
    // スクロール位置に応じて背景色と文字色を変更
    if (scrollPosition > (content1.offsetTop - scrollThresholdStart) 
     && scrollPosition < (content1.offsetTop + content1.offsetHeight + scrollThresholdEnd)
     )
     {
      body.style.backgroundColor = "black";
      body.style.color = "white"; // 文字色を白に変更
     } else {
      body.style.backgroundColor = "white";
      body.style.color = "black"; // 文字色を黒に変更
    }
  });
});

URLをコピーしました！