【JavaScript】スクロールで半透明になるヘッダー
ページをスクロールすると半透明になるヘッダーはよく見かけるし、見やすくて便利ですよね。
作り方を調べたら 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 の解説
header
にscroll
クラスをつけたいので、querySelector
でheader
を定義します。
もしスクロールされたら(addEventListener
)、スクロール量を取得しスクロールの量により if 文で動きを分けています。
もしスクロールがされなかったら(scrollY <= 0
)、header
からscroll
クラスを削除します。ここでscrollY === 0
としなかったのは、ブラウザやデバイスによっては数値がマイナスになるケースもあるためです。
それ以外の場合(スクロールが 1px でも発生したら)header
にscroll
クラスをつけます。
もしまたページの一番上に戻ったら(scrollY === 0
)、scroll
からscroll
クラスを削除します。
まとめ
JS のコードをたくさん書かずに簡単に実装できました。
使い回しがきくパーツなので、ハンバーガーメニューとあわせるとコードを書く時間を減らせそうです。
Vanilla.JS で作るハンバーガーメニュー
Discussion