こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
最近では、スクロールしてもヘッダーが上部に固定されている「Stickyヘッダー」のあるWebサイト、当たり前になってきましたよね。
でも、それだけではもう差がつかない…。
そこで今回は、スクロールの位置に応じてヘッダーのスタイルを切り替える方法をご紹介します！
- 「スクロールしたら背景色が変わる」
- 「ロゴサイズが小さくなる」
- 「影がついて浮き上がる」
こうした動きは、見た目のアクセントだけでなく、ユーザーの操作性向上にも大きく貢献してくれます。
この記事では、CSSのposition: stickyとJavaScriptのスクロールイベントを組み合わせて、スクロールに応じて動的にヘッダースタイルを変更するテクニックを実装例付きで解説します！
どんな場面で使えるの？
スクロール連動ヘッダーは、以下のようなシーンで役立ちます。
- 背景が写真や動画で、ロゴやナビが埋もれてしまうとき
- ヘッダーが大きすぎてスクロール後に邪魔に感じるとき
- スクロール後に「戻る」ためのナビゲーションを目立たせたいとき
特に最近はモバイルファーストの時代。
スクロールに応じてヘッダーをコンパクトに変化させるだけで、UXがかなり向上します。
基本構造：Stickyヘッダー＋スクロール連動
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まずは基本となるHTMLとCSSです。
HTML
<header id="site-header" class="site-header">
<h1 class="logo">My Website</h1>
<nav>...メニュー...</nav>
</header> CSS
body{
height:1000px;
}
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: transparent;
padding: 20px 40px;
transition: all 0.3s ease;
}
.site-header.scrolled {
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px 40px;
}
クラス .scrolled がスクロール時に追加されることで、背景色やパディングが変化する仕様です。
JavaScriptでスクロール位置を監視
あとは、スクロール量に応じて.scrolledクラスを付け外しするだけ！
const header = document.getElementById("site-header");
window.addEventListener("scroll", () => {
if (window.scrollY > 50) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
});
このスクリプトでは、50px以上スクロールしたらスタイルを切り替えるというシンプルな処理です。
スクロール量のしきい値は、見た目に合わせて自由に調整してください。
さらに進化：ロゴのサイズ変更やフェードイン
ロゴサイズも変更
もっと動きを加えたい場合は、ロゴサイズや透明度も一緒に変化させるのが効果的です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
.logo {
font-size: 2rem;
transition: font-size 0.3s ease;
}
.site-header.scrolled .logo {
font-size: 1.4rem;
}
ナビゲーションメニューをフェードイン
または、ナビゲーションメニューをフェードインするのもGood。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
.site-header nav {
opacity: 0;
transition: opacity 0.3s ease;
}
.site-header.scrolled nav {
opacity: 1;
}
ほんの少しの変化ですが、ユーザーは「いまどこにいるか」がわかりやすくなり、操作感の向上に直結します。
まとめ
スクロールに応じてヘッダーのスタイルを動的に切り替えることで、Webサイトの使いやすさ・デザイン性がぐっとアップします！
今回紹介したテクニックはシンプルながら応用しやすく、ブランドサイトやランディングページ、ポートフォリオサイトにも最適です。
まずはこの記事のサンプルコードを試して、あなたのサイトでも取り入れてみてください。
小さな動きで、大きな印象の変化が生まれますよ！
