スティッキーヘッダー

Sticky header

別名: 固定ヘッダー、追従ヘッダー、スティッキーナビ、Sticky nav、Fixed header、Pinned header

生態(さわってみる)

一言定義

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

分類

使う場面

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

避ける場面

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

近縁種との比較

トップへ戻るボタンとは、どちらも長いページのスクロール体験を補助する固定要素という点で共通するが、スティッキーヘッダーがスクロール中も常にナビゲーションへアクセスできる状態を維持するのに対し、トップへ戻るボタンはスクロールが一定量進んだ後にだけ現れ、先頭へのショートカットに特化する点で役割が異なる。ボトムナビゲーションとは、画面上部か下部かという固定位置の違いに加え、前者がヘッダーの内容(ロゴ・検索・パンくず等)をそのまま追従させるのに対し、後者は主要な行き先の切り替えという専用の役割を持つ点で区別される。

実例リンク

アクセシビリティ

role
header要素(バナーランドマーク)。特別なroleの付与は不要
キーボード操作
内部のリンク・ボタンは通常のTab移動。固定自体はキーボード操作に影響しない
補足
position: stickyはCSSのみで実現可能。固定状態への変化はスクロール監視で判定し、装飾(影)の切り替えに留め、構造やフォーカス順序は変えない