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>