CSSでヘッダーを上部に固定するには
position: sticky でスクロール領域の先頭にヘッダーを貼り付ける基本形を示す。
スクロールしても見出しが消えないため、長い一覧でも今どこを見ているかが分かる。
実行確認済み
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
公開:
<style>
.scroll-area {
height: 160px;
overflow-y: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
}
.sticky-header {
position: sticky;
top: 0;
padding: 10px 14px;
background: #0f766e;
color: #fff;
font-weight: 700;
}
.scroll-area p {
margin: 0;
padding: 12px 14px;
border-bottom: 1px solid #f1f5f9;
}
</style>
<div class="scroll-area">
<div class="sticky-header">固定ヘッダー</div>
<p>行 1</p>
<p>行 2</p>
<p>行 3</p>
<p>行 4</p>
<p>行 5</p>
<p>行 6</p>
</div>position: sticky は通常のフローに置かれたまま、指定した top の位置まで来ると貼り付く。
top を省くと貼り付く位置が決まらず静的配置と同じ見た目になるため、sticky には必ず top（または left / right / bottom）を添える。
つまずき
sticky が効かない原因で最も多いのは、祖先要素に overflow: hidden / auto / scroll が付いていることである。
sticky 要素は最も近いスクロール可能な祖先を基準に貼り付くので、途中に別のスクロールコンテナがあると、そちらの中で貼り付いてしまい期待した位置に留まらない。
もう一つ多いのが、スクロールする側の高さが中身と同じで、そもそも貼り付く余地が無いケースである。
上の例では .scroll-area に height と overflow-y を与えることで、この 2 点を満たしている。
position: fixed との違い
fixed はビューポート基準で完全に浮くため、後続のコンテンツがその下へ潜り込み、レイアウト側で余白を確保する必要がある。
sticky は元の場所を占有したまま貼り付くので、重なりや詰まりが起きにくい。
ページ全体のグローバルヘッダーには fixed、一覧やテーブルの見出し行には sticky、と使い分けるのが基本である。