ナビ・リスト操作
縮小ヘッダー
スクロールするとヘッダーが縮み、背景と影が付く。上部に戻ると元のサイズに戻る。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
コード（コピーして使えます）
<header class="sh-header">
<div class="sh-inner">
<span class="sh-logo">MyBrand</span>
<nav class="sh-nav">
<a href="#">ホーム</a>
<a href="#">サービス</a>
</nav>
</div>
</header>
<div class="sh-body">
<div class="sh-section sh-section--top">
<p>↓ スクロールするとヘッダーが縮みます</p>
</div>
<div class="sh-section">
<p>スクロール中…</p>
</div>
<div class="sh-section">
<p>さらに下へ</p>
</div>
<div class="sh-section">
<p>↑ 上に戻るとヘッダーが広がります</p>
</div>
</div>