追従セクション

Pinned section

別名: 追従セクション、ピン留めセクション、Sticky scroll、Pinned section

生態(さわってみる)

一言定義

目次やサマリーカードなど特定の要素が、その周囲のセクションをスクロールしている間だけ画面内に留まり続け、セクションを抜けると追従を解除するUI。

分類

使う場面

  • 長い記事の脇に目次やまとめカードを置き、該当セクションを読んでいる間だけ見せ続けたいとき
  • ページ全体ではなく特定コンテンツブロックに限定してスクロール追従させたいとき

避ける場面

  • サイト全体で常時アクセスさせたいナビゲーションを固定したいとき(→スティッキーヘッダー)
  • 追従させたい要素の分量が親セクションの高さに収まらず、後続セクションまではみ出してしまうとき

近縁種との比較

追従セクションはスティッキーヘッダーと同じposition: stickyという実装手段を使うが、両者は固定の対象が異なる。スティッキーヘッダーはページ全体のヘッダー(ナビゲーション・検索等)を画面上部に固定し続ける「ヘッダー固定」であるのに対し、追従セクションは記事本文の脇に置いた目次やまとめカードのような「特定要素」を、その要素が属するセクションの範囲内でだけ固定する。ページ全体で常時アクセスさせたいならスティッキーヘッダー、特定コンテンツに紐づく補助情報だけを一時的に追従させたいなら追従セクションを使う。スクロールスパイとは、どちらも長い記事のスクロールに連動する点で近縁だが、スクロールスパイは要素の位置そのものは固定せずナビゲーション側のハイライトだけを切り替えるのに対し、追従セクションは要素自体の画面上の位置を固定するという違いがあり、両者を組み合わせて「追従する目次がスクロールスパイでハイライトも変わる」構成にすることも多い。

実例リンク

アクセシビリティ

role
特別なroleは不要。追従する要素はaside/nav等、意味に応じた要素のまま用いる
キーボード操作
position: stickyによる視覚的な固定はフォーカス順序やTab移動に影響しない
補足
position: stickyはその要素の「親」の高さの範囲内でのみ追従し、親のスクロール範囲が尽きると一緒にスクロールアウトする。追従させたい範囲=親要素の高さの設計が肝になる