🫥

【JavaScript】スクロールで半透明になるヘッダー

2024/10/10に公開


ページをスクロールすると半透明になるヘッダーはよく見かけるし、見やすくて便利ですよね。
作り方を調べたら jQuery の方法がたくさん出てきたので、JavaScript で同じ挙動を再現してみました。JavaScript で実装したい方の参考になれば幸いです。

作るのはこんなヘッダーです。

  • 画面最上部にいるときは背景色あり
  • 1px でもスクロールしたら半透明
  • 半透明のときはヘッダー内部の文字色を変える

コード

結論のコードです。

    <header class="header">
        <div class="header__inner">
          <nav class="header__nav">
            <ul>
              <li><a href="">TOP</a></li>
              <li><a href="">サービスについて</a></li>
              <li><a href="">料金</a></li>
              <li><a href="">お問い合わせ</a></li>
            </ul>
        </div>
      </div>
    </header>
    <div class="l-container">
      <p>スクロール確認用画像</p>
      <img src="./img/ebi.png" alt="" width="400" height="396"><br>
      <img src="https://placehold.jp/150x1500.png" alt="" width="150" height="1500">
    </div>
body {
  background-color: pink;
}

.l-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
}

.header {
  height: 80px;
  background-color: skyblue;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: 0.5s;
}
.header.scroll {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header.scroll li {
  color: #333;
}

.header__inner {
  height: inherit;
}

.header__nav {
  height: inherit;
}

.header__nav ul {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.header__nav ul li {
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}
// ヘッダー
const header = document.querySelector("header");
window.addEventListener("scroll", () => {
  // 垂直方向のスクロール量
  const scrollY = window.scrollY;
  if (scrollY <= 0) {
    header.classList.remove("scroll");
  } else {
    header.classList.add("scroll");
  }
});

HTML の解説

ヘッダーを設置し、スクロール確認用に画像を入れています。
特に複雑なことはしていません。

CSS の解説

ヘッダーの背景色をskyblueで水色に、position:fixed;にして固定しています。
スクロールしたらscrollクラスをheaderにつけて、背景色を変更しています。
ただ半透明にするだけだと物足りなかったので、backdrop-filterでブラーをかけています。
ブラーとは、ぼかしの一種です。グラスモーフィズムと呼ばれる、すりガラスのような表現をするときに使います。
-webkit-でベンダープレフィックスをつけています。

補足:ベンダープレフィックス

Chrome、Safari などの WebKit ベースのブラウザーすべてに対して使うのが-webkit-です。ちなみに-moz-は Firefox、-ms-は IE や Edge に対してベンダープレフィックスを効かせたいときに使います。

ざっくり説明すると、この CSS はまだ CSS3 の世界で見習いなので、ベンダープレフィックスをつけておいてね、というものです。
CSS3 の世界で一人前になると、ベンダープレフィックスを外せます。

いつベンダープレフィックスをつければいいのかは、Can I use...から確認できます。
blurを検索すると、緑の枠の右上に小さな黄色いマークがあります。これがベンダープレフィックスが必要なブラウザのバージョンです。

JS の解説

headerscrollクラスをつけたいので、querySelectorheaderを定義します。
もしスクロールされたら(addEventListener)、スクロール量を取得しスクロールの量により if 文で動きを分けています。
もしスクロールがされなかったら(scrollY <= 0)、headerからscrollクラスを削除します。ここでscrollY === 0としなかったのは、ブラウザやデバイスによっては数値がマイナスになるケースもあるためです。

それ以外の場合(スクロールが 1px でも発生したら)headerscrollクラスをつけます。

もしまたページの一番上に戻ったら(scrollY === 0)、scrollからscrollクラスを削除します。

まとめ

JS のコードをたくさん書かずに簡単に実装できました。
使い回しがきくパーツなので、ハンバーガーメニューとあわせるとコードを書く時間を減らせそうです。
Vanilla.JS で作るハンバーガーメニュー

Discussion