固定ヘッダー

Sticky header

スクロールしても画面上部に固定されたまま追従し続けるヘッダーUI。

○ 使う場面

  • 長いページで、検索や主要ナビゲーションに常時アクセスさせたいとき
  • スクロール位置に関わらず現在地(パンくず等)を見せ続けたいとき

× 避ける場面

  • コンテンツの縦の可視領域を最大化したい、画像・動画中心のページ
  • ヘッダーの固定によって重要なコンテンツが隠れてしまう狭い画面

別名

スティッキーヘッダー、追従ヘッダー、スティッキーナビ

近縁種との比較

「スティッキー」は英語のsticky(粘着性の、貼り付く)に由来し、スクロールしても画面上部に貼り付いたように留まり続ける様子を表す。CSSのposition: stickyというプロパティ名もこの語感をそのまま採用している。

近縁種違い・使い分け
トップへ戻るボタン固定ヘッダーがスクロール中も常にナビゲーションへアクセスできる状態を維持するのに対し、トップへ戻るボタンはスクロールが一定量進んだ後にだけ現れ、先頭へのショートカットに特化する。
ボトムナビゲーション(タブバー)画面上部か下部かという固定位置の違いに加え、固定ヘッダーがヘッダーの内容(ロゴ・検索・パンくず等)をそのまま追従させるのに対し、ボトムナビゲーションは主要な行き先の切り替えという専用の役割を持つ。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション