目次
メインビューをすぎたら色が変わるヘッダー
See the Pen Untitled by Tomo56 (@tomokoro) on CodePen.
JavaScriptで書きかえてみる
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener("scroll", function () {
const sliderSection = document.querySelector(".p-section1");
const header = document.querySelector(".p-header");
const logo = document.querySelector(".p-header__logo");
if (!sliderSection || !header || !logo) return;
const sliderHeight01 = sliderSection.offsetHeight;
const scrollTop = window.scrollY;
if (scrollTop > sliderHeight01 - 30) {
header.classList.add("change-color");
logo.classList.add("change-color");
} else {
header.classList.remove("change-color");
logo.classList.remove("change-color");
}
});
});
JavaScriptを使って細かい指定を入れてみる
// headerの高さを取得して、fvの場合はpadding-topをつける、sub-fvの場合はmargin-topをつける
const header = document.querySelector('.header');
const fv = document.querySelector('.fv');
const subFv = document.querySelector('.sub-fv');
if (fv) fv.style.paddingTop = `${header.offsetHeight}px`;
if (subFv) subFv.style.marginTop = `${header.offsetHeight}px`;トップページの時はpaddingで設定したいが仮想ページではmarginで設定したいとき。
fvやsubFvが存在しないページでこのコードが実行されると、
fvやsubFvがnullとなり、
fv.styleやsubFv.styleでエラー（TypeError）が発生するようです。
そのため、
if (fv) …と条件をつける必要があります。