【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");
  }
});