スクロールによって、背景色を変更
目次
できること
スクロールによって、背景色を変更するコードです。
要素のクラス名や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をコピーしました！