今まで使用する機会がなく、あまり馴染みはありませんでしたが今回はpositon: sticky;について書いてみたいと思います。
通常要素は文書フローに従ってスクロールされますが、positon: stickyは指定されたオフセットに達するとその位置に固定されるようにするためのものです。
表などで見出しを固定したい時などに使用します。EXCELでよく使用していたウィンドウ枠の固定に似ています。
例えば下記のようなHTMLとCSSのコードがあったとします。
HTML
<div class=”container”>
<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
<th>見出し4</th>
</tr>
</thead>
<tbody>
<tr><td>データ1-1</td><td>データ1-2</td><td>データ1-3</td><td>データ1-4</td></tr>
<tr><td>データ2-1</td><td>データ2-2</td><td>データ2-3</td><td>データ2-4</td></tr>
<tr><td>データ3-1</td><td>データ3-2</td><td>データ3-3</td><td>データ3-4</td></tr
<tr><td>データ4-1</td><td>データ4-2</td><td>データ4-3</td><td>データ4-4</td></tr>
<tr><td>データ5-1</td><td>データ5-2</td><td>データ5-3</td><td>データ5-4</td></tr>
<tr><td>データ6-1</td><td>データ6-2</td><td>データ6-3</td><td>データ6-4</td></tr>
<!– さらに多くのデータ行を追加 –>
</tbody>
</table>
</div>
CSS
.container {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
th {
position: sticky;
top: 0;
background-color: #f1f1f1;
z-index: 1;
}
表に多数の行があるため、親要素のcontainerで一旦、高さを固定(300px)して収まるようにoverflow-y :scroll;をつけます。
ただ、このままではスクロールすると見出しが消えてしまい見づらくなってしまいます。そこで見出しのth要素にposition: sticky;をつけることにより、下記のように見出しが固定され見やすくなります。
比較的新しいプロパティのため、Internet Explorerではサポートされていませんが、ほとんどのモダンブラウザではサポートされています。