https://q-az.net/position-sticky/
「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じ。
よく広告がスクロールしても付いてくるやつがあるが、その動きがまさにstickyである。
最終的にどこまで固定されて要素がついてくるかは「sticky がかかった要素の親の端」まで。
一番単純な使い方
<html> <body> scroll 1<br> scroll 1<br> scroll 1<br> scroll 1<br> scroll 1<br> <div> <div style="position:sticky; top:0px; background-color:yellow;">このdiv要素が終わるまで、一番上に付いてくる要素</div> scroll 2<br> scroll 2<br> scroll 2<br> scroll 2<br> scroll 2<br> </div> scroll 3<br> scroll 3<br> scroll 3<br> scroll 3<br> scroll 3<br>
テーブルヘッダを固定
<html>
<style>
table tr:first-child th {
background-color:red;
position: sticky;
top:0px;
z-index: 1;
}
table th {
background-color:green;
position: sticky;
left:0px;
}
</style>
<body>
<div style="width:500; height:200px; overflow:scroll;">
<table border=1>
<tr><th>head</th><th>head</th><th>head</th></tr>
<tr><th>head</th><td>data<br>data<br>data<br>data<br></td><td>datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata</td></tr>
<tr><th>head</th><td>data<br>data<br>data<br>data<br></td><td>datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata</td></tr>
<tr><th>head</th><td>data<br>data<br>data<br>data<br></td><td>datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata</td></tr>
</table>
</div>
