スティッキーヘッダー & トップバーシステム
目的
スティッキーヘッダー & トップバーシステムは、画面上部に固定されるナビゲーションスタックを設計、構造化、動作設定するための包括的なフレームワークを提供します。現代のWebアプリケーションやマーケティングサイトでは、プロモーション用のアナウンスバナー、セカンダリユーティリティリンク（通貨/言語セレクター、サポートリンク、ストアロケーター）、プライマリナビゲーションバーを組み合わせた多層トップバーが頻繁に使用されます。
これらのバーがスクロール中に固定またはスティッキーになる場合、アーキテクチャが不適切だと、モバイルで垂直ビューポートスペースを過剰に消費する、アンカータゲットコンテンツが隠れる（scroll-margin-topの不一致）、スクロール状態変化時にレイアウトスラッシングやスタッターが発生する、モーダルやドロップダウンとのz-index競合が生じる、キーボードフォーカスがトラップされる、スクリーンリーダーのランドマークナビゲーションが機能しなくなる、といった深刻なユーザビリティ問題を引き起こします。このスキルは、スティッキーヘッダーの設計、空間構成、スクロール状態ロジック、エレベーションスタイリング、アクセシビリティ基準を確立します。
ユースケース
- Eコマースグローバルヘッダー: トップアナウンスバナー（プロモコード/送料無料進捗）、ユーティリティリンク（アカウントログイン、地域セレクター、ストアロケーター）、検索バーとカート数バッジを備えたメインスティッキーナビゲーションを組み合わせた多層トップバー。
- SaaSマーケティング & プロダクトマーケティングヘッダー: スクロール時に縮小する（パディング/ロゴサイズを削減）クリーンなプライマリヘッダー、またはスクロールダウンで非表示/スクロールアップで再表示する動的ヘッダーにより、垂直方向のコンテンツ領域を最大化しつつ、即座にナビゲーションにアクセスできるようにします。
- コンテンツポータル & パブリケーションヘッダー: 読書進行状況バー、カテゴリナビゲーション、記事タイトル表示、クイックブックマーク/共有フローティングツールを統合したスティッキーヘッダー。
- Webアプリケーション & SaaSアプリシェル: パンくずリスト、アクティブワークスペーススイッチャー、コマンド検索トリガー、ユーザープロファイルメニュー、リアルタイム通知ベルを含む固定トップバー。
使用すべきでないケース
- キャンバス内フォーマッティングツールバー: リッチテキストエディタのツールバーや一括操作ドックがコンテンツ上にフロートする場合や特定のエディタコンポーネントにアタッチされる場合は、
toolbar-and-action-dock-systemを使用してください。 - モバイルボトムナビゲーションバー: モバイルビューポート下部に固定されるプライマリモバイルアプタブの場合は、
bottom-navigation-systemを使用してください。 - フルサイドナビゲーションシェル: プライマリナビゲーションが折りたたみ可能な左サイドバーレールによって駆動される複雑なSaaS Webアプリケーションの場合は、
sidebar-navigation-systemを使用してください。 - フローティングアクションドック: ビューポートの隅に固定されるフローティングコンテキストボタン（チャットウィジェット、トップに戻るFABなど）の場合は、
sticky-and-floating-ui-systemを使用してください。
入力
- トップバー階層アーキテクチャ: 存在する階層の指定（例：階層1: アナウンスバー、階層2: ユーティリティヘッダー、階層3: プライマリナビゲーション）。
- スクロール動作モデル: 希望するスティッキーメカニズム（
sticky-always、shrink-on-scroll、hide-on-scroll-down / reveal-on-scroll-up、またはstatic-to-sticky）。 - サーフェス & テーマトークン: 背景サーフェスカラー、ボーダートークン、背景ぼかし効果（
backdrop-filter: blur()）、elevation-and-depth-systemおよびaccessible-color-systemからのエレベーションシャドウ。 - ビューポート & デバイスターゲット: マルチ階層デスクトップヘッダーを統合モバイルトップバーに折りたたむためのブレークポイント閾値（
< 768px、< 1024px、≥ 1024px）。
出力
- スティッキーヘッダーレイアウト & スタッキング仕様: 固定/スティッキーポジショニングを定義するCSS Grid/Flexbox構造、CSSカスタムプロパティオフセット変数（
--header-height）、z-index階層スケール。 - スクロール状態遷移 & モーションルール: スクロールリスナーロジック、閾値オフセット、CSSトランジションクラス（
.is-scrolled、.is-hidden）、ハードウェアアクセラレーション変換（transform: translateY()）の技術仕様。 - レスポンシブモバイル折りたたみ仕様: 複数行のデスクトップトップバーを、ドロワートグルトリガーを備えた単一のコンパクトなモバイルヘッダーに変換するレイアウトルール。
- WCAG AAアクセシビリティブループリント: スキップリンクの実装（
.skip-link）、見出しアンカーに対するscroll-margin-topオフセット補正、キーボードフォーカストラップ回避、スクリーンリーダーランドマーク構造（<header>、<nav>、`role=