こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
「ヘッダーを固定しておきたいけど、ページトップとスクロール後では見た目を変えたい」
こんなお悩み、Web制作をしているとよく出てきますよね。
- ページトップでは透明なヘッダーに
- スクロールすると白背景＋影付きで目立たせる
- ロゴやメニューのサイズを縮小して省スペース化
このようなスクロール連動でスタイルを変えるUIは、今では定番のデザイン手法です。
今回は、CSSの position: sticky に JavaScript を組み合わせて、シンプルだけど実用的なヘッダースタイルの切り替えを実装してみましょう！
StickyとFixedの違いって？
まず基本のおさらいです。スクロールしても画面上部に固定されるヘッダーは、主に以下の方法で実装されます。
- position: fixed; → 常に画面の上部に固定
- position: sticky; → スクロール位置に応じて固定・非固定が切り替わる
今回は「スクロールでヘッダーの見た目を変える」ことが目的なので、stickyでスクロール位置を検知し、JavaScriptでclassを切り替える方法がぴったりです。
実装ステップ①：HTMLとCSSでヘッダーを作る
HTML構造
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは、スクロール量が50pxを超えたらクラス scrolled を追加し、スタイルを切り替えます。
scrollY はブラウザの縦方向スクロール量を取得するプロパティです。
応用：ロゴサイズやメニューの縮小アニメーション
スクロール後にロゴやメニューのサイズを縮小させる演出も、最近のWebデザインではよく使われています。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
その他、ナビゲーションの余白や高さ、色味を変えることも簡単にできます。
注意点：パフォーマンスとアクセシビリティ
JavaScriptでスクロールイベントを使うときは、軽量な処理にすることが重要です。
大量のDOM操作をすると、ページの動作が重くなる場合もあるため、次の工夫がおすすめです。
- 条件分岐をシンプルに
- イベントリスナーは必要なときだけ追加
- requestAnimationFrameやthrottleを使って最適化
また、視覚的な変更がある場合は、視覚以外に頼らない設計（WAI-ARIA属性など）にも気を配りたいところです。
まとめ
スクロール位置に応じてヘッダーのスタイルを切り替える方法は、デザイン性と機能性を両立できるUIの工夫です。
- Sticky＋JSでスムーズに切り替え
- 見た目の変化だけでなく、UXにも貢献
- シンプルなコードで導入でき、さまざまなデザインに応用可能
ちょっとした実装でも、ユーザーの印象は大きく変わります。
ぜひ、あなたのWebサイトにも「動きのあるヘッダー」を取り入れてみてくださいね！
satokotadesignキャンペーン実施中！
