追従セクション
Pinned section目次やサマリーカードなど特定の要素が、その周囲のセクションをスクロールしている間だけ画面内に留まり続け、セクションを抜けると追従を解除するUI。
○ 使う場面
- 長い記事の脇に目次やまとめカードを置き、該当セクションを読んでいる間だけ見せ続けたいとき
- ページ全体ではなく特定コンテンツブロックに限定してスクロール追従させたいとき
× 避ける場面
- サイト全体で常時アクセスさせたいナビゲーションを固定したいとき（→固定ヘッダー）
- 追従させたい要素の分量が親セクションの高さに収まらず、後続セクションまではみ出してしまうとき
別名
追従セクション、ピン留めセクション
近縁種との比較
「追従」という語は、対象の動きにぴったり付いていくという意味で、要素が周囲のスクロールに合わせて画面内へ留まり続けながらも、決められた範囲を超えた瞬間に通常の流れへ戻るという、このUI特有の挙動をそのまま言い表している。
| 近縁種 | 違い・使い分け |
|---|---|
| 固定ヘッダー | 追従セクションは固定ヘッダーと同じposition: stickyという実装手段を使うが、固定の対象が異なる。固定ヘッダーはページ全体のヘッダーを画面上部に固定し続けるのに対し、追従セクションは記事本文の脇に置いた目次やまとめカードのような特定要素をそのセクションの範囲内でだけ固定する。ページ全体で常時アクセスさせたいなら固定ヘッダー、特定コンテンツに紐づく補助情報だけを一時的に追従させたいなら追従セクションを使う。 |
| スクロールスパイ | どちらも長い記事のスクロールに連動する点で近縁だが、スクロールスパイは要素の位置そのものは固定せずナビゲーション側のハイライトだけを切り替えるのに対し、追従セクションは要素自体の画面上の位置を固定するという違いがあり、両者を組み合わせて使うことも多い。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション