固定ヘッダー
Sticky headerスクロールしても画面上部に固定されたまま追従し続けるヘッダーUI。
○ 使う場面
- 長いページで、検索や主要ナビゲーションに常時アクセスさせたいとき
- スクロール位置に関わらず現在地(パンくず等)を見せ続けたいとき
× 避ける場面
- コンテンツの縦の可視領域を最大化したい、画像・動画中心のページ
- ヘッダーの固定によって重要なコンテンツが隠れてしまう狭い画面
別名
スティッキーヘッダー、追従ヘッダー、スティッキーナビ
近縁種との比較
「スティッキー」は英語のsticky(粘着性の、貼り付く)に由来し、スクロールしても画面上部に貼り付いたように留まり続ける様子を表す。CSSのposition: stickyというプロパティ名もこの語感をそのまま採用している。
| 近縁種 | 違い・使い分け |
|---|---|
| トップへ戻るボタン | 固定ヘッダーがスクロール中も常にナビゲーションへアクセスできる状態を維持するのに対し、トップへ戻るボタンはスクロールが一定量進んだ後にだけ現れ、先頭へのショートカットに特化する。 |
| ボトムナビゲーション(タブバー) | 画面上部か下部かという固定位置の違いに加え、固定ヘッダーがヘッダーの内容(ロゴ・検索・パンくず等)をそのまま追従させるのに対し、ボトムナビゲーションは主要な行き先の切り替えという専用の役割を持つ。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション