透明ヘッダー（ヒーロー重ね）

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

このパーツは、ページ最上部では背景を透明にしてヒーロー画像の上に文字だけを浮かせ、スクロールすると白背景に切り替わるヘッダーです。position:fixedで常に画面上部へ固定し、スクロール量を検知してis-scrolledクラスを付け外しすることで、backgroundとbox-shadow、文字色をtransitionで滑らかに変化させます。フルブリード（画面幅いっぱい）のメインビジュアルと重ねる前提の設計です。

向いている場面

• 大きな写真や動画を最初に見せたいコーポレートサイトのトップ
• ブランドの世界観を全画面で打ち出すホテルや飲食店のサイト
• 採用・サービス紹介など、第一印象で惹きつけたいランディングページ

カスタマイズと注意点

切り替わるしきい値（何px下げたら白くするか）はJSの数値で調整できます。透明時の文字は白、白背景時は濃色にして、どちらの状態でもコントラストを確保してください。ヒーロー画像が明るすぎると透明時のロゴが沈むため、画像の上に薄い暗幕を重ねると安定します。ハンバーガーにはaria-labelを付け、固定ヘッダーの高さ分だけ本文に上余白を取ると、リンク先へジャンプした際に見出しが隠れません。

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