Result
よく見かけるスクロール時のストーカーコンテンツをCSSだけでやろうという内容です。
特にトリックでもなんでもないのすが、position: sticky;
使えば一部のブラウザを除いて実装できるようになりましたので使用例的な記事です。
position: sticky;に関してはtableのネタでも以前書きましたので参考になりましたら幸いです。
position: sticky;でtableを下スクロール時はヘッダ、横スクロール時は最左を固定
css
aside h 3 { background : yellow; position : -webkit-sticky; position : sticky; top : 0 ; } |
html
< article > < section >foo</ section > < aside > < h3 >bar</ h3 > </ aside > </ article > |
can i use
position: sticky;
のブラウザサポート状況です。
現在までで、IEはサポ外、EdgeとChromeはtrやtheadで正常動作しないバグがあるようです。