↕️

【CSS】ヘッダーを固定したときにアニメーションさせる

2025/02/25に公開3

つくるもの

ヘッダーが画面から消えたとき、上からスライドインして固定表示したい。

コード

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

junerjuner

交差オブサーバを使うアプローチもあったと思うのですが、どっちが良いのでしょうかね……?

https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

NettoNeonNettoNeon

普段は交差オブザーバーを使ってるんだけど、今回はHeaderが画面に入ったときに判定が暴れちゃったので(録画に映らない速度で点滅するなど)、安定を取ってScroll判定にしました。

junerjuner

あー。そういうことか。把握。
ありがとうございます。