↕️
【CSS】ヘッダーを固定したときにアニメーションさせる
つくるもの
ヘッダーが画面から消えたとき、上からスライドインして固定表示したい。
コード
html
<header class="header">
<h1><img src="" alt="ロゴ"></h1>
<nav>
<ul>
<li>top</li>
<li>about</li>
<li>news</li>
<li>contact</li>
</ul>
</nav>
</header>
css
.header {
position: sticky;
top: 0;
}
.header.is-animated {
animation: SlideDown 1s;
}
@keyframes SlideDown {
0% {
transform: translateY(-110%);
}
100% {
transform: translateY(0);
}
}
javascript
window.addEventListener("scroll", () => {
const header = document.querySelectorAll(".header")[0];
if (!header) return; // header がない場合は処理をスキップ
const headerHeight = header.offsetHeight; // ヘッダーの高さを取得
const scrollPosition = window.scrollY; // スクロール位置を取得
const AnimatedViewport = scrollPosition > headerHeight; // 指定の位置を超えたら true
if (AnimatedViewport) {
header.classList.add("is-animated");
} else {
header.classList.remove("is-animated");
}
});
Discussion
交差オブサーバを使うアプローチもあったと思うのですが、どっちが良いのでしょうかね……?
普段は交差オブザーバーを使ってるんだけど、今回はHeaderが画面に入ったときに判定が暴れちゃったので(録画に映らない速度で点滅するなど)、安定を取ってScroll判定にしました。
あー。そういうことか。把握。
ありがとうございます。