CSSだけでスクロールしても追従するサイドバー

0

Result


よく見かけるスクロール時のストーカーコンテンツをCSSだけでやろうという内容です。
特にトリックでもなんでもないのすが、position: sticky;使えばいい部ブラウザを除いてできるようになりましたので使用例的な記事です。
position: sticky;に関してはtableのネタでも以前書きましたので参考になりましたら幸いです。
position: sticky;でtableを下スクロール時はヘッダ、横スクロール時は最左を固定

css

aside h3 {
	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で正常動作しないバグがあるようです。

Share.

About Author

Comments are closed.