どうも、櫻井です。
最近position sticky
なるものを知りまして、これがまた便利だなと思って共有するための記事を書きました。
概要
この方の記事がめちゃめちゃわかりやすいです。 動画もついているし、デモ用のコードがくっついているので。
position: stickyの面白い使い方と使用時の注意点 | Rriver
使い方
親要素の構成によるところがありますが、基本的に
.sticky-class { position: -webkit-sticky; position: sticky; bottom: 0; }
こんなのでいけちゃいます。
ポイントはposition: sticky
で指定する部分と、topやbottomなどの指定があるところですね。
top: 0
にすると上でひっかかって、 bottom: 0
とかにすると下でひっかかるイメージです。
position: -webkit-sticky;
はsafariに対応するためのものになります。iOSなど想定が多いなると必須かと思われます。
注意点
2018/5時点では、IE11には対応していないみたいです。
そのため利用する際は注意が必要ですね。 モバイルでの利用想定などであればそこまで問題なさそうです。
Can I use... Support tables for HTML5, CSS3, etc
ブログとかにもどんどん使っていきたいcssだなぁと。