スティッキーヘッダー（ハンバーガーメニュー付き）

このパーツの使いどころと実装ポイント

このパーツは、PCでは横並びのフラットナビ、スマホでは右からスライドするドロワーに切り替わるヘッダーです。position:fixedで常に画面上部に固定され、スクロールするとis-scrolledクラスが付いて背景が半透明の白とシャドウに変化します。最初は背景なしで写真の上に重ね、読み進めると視認性を上げるという、ヒーローと相性のよい挙動です。

仕組みのポイント

ナビの切り替えは@media(max-width:720px)で行い、その幅以下ではナビを画面外（right:-280px）に退避し、ハンバーガーボタンでis-openを付けて引き出します。ボタンにはaria-expandedとaria-labelが設定され、開閉状態を支援技術に伝えられるようになっています。背後のheader-overlayはドロワーを開いたときに本文を暗くし、タップで閉じるための受け皿です。

向いている場面と注意

• コーポレートサイトやサービスサイトの共通ヘッダー
• 1カラムの縦長LPで、常時CTAを上部に置きたいとき

固定ヘッダーは本文の先頭に重なるため、最初のセクションにpadding-topを確保しないと見出しが隠れます。ロゴ文字やリンク文言は実際の項目数に合わせて調整し、ドロワーを開いている間は背面のスクロールを止めると操作が安定します。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。