サイドバーの追従固定をCSSだけで実現する方法
一定量スクロールするとサイドバーを追従して固定させたい時は結構ある。
実現するにはこれまでJavaScriptを使う必要があったけど、CSSだけで実現できるようになってすごい楽になった。
まずはどうやってCSSだけで実現するのかサクッとサンプルを。
stickyで固定する
サイドバーを追従固定するにはCSSのposition: sticky;を使うことで実現できる。
固定したい要素に下記のCSSを指定する。
1 2 3 4
.sticky { position: sticky; top: 20px; }
topは固定したい要素を画面のどこに固定するかを指定する。
上記の場合は画面の上から20pxの位置に固定される。
実際に固定するサンプルは下記。
@[codepen](https://codepen.io/koojy/details/VxXNPW)
https://zenn.dev/koojy/articles/sitkcky-not-working
ブラウザの対応状況
position: stickyは対応するブラウザによって、使うことができない場合がある。
懸念されるIEは11では対応しておらず、Edgeのみ対応であれば、stickyを使うことが可能。
ChromeやFirefox、iOSのSafariなどIEを除く最新版は対応し ている。
https://caniuse.com/#feat=css-sticky
CSSで追従固定できるメリット
position: stickyで実現できるまでは、JavaScriptを使う必要があると先に書いたけど、本当にめんどくさかった。
画面のサイズが変わった時や画面幅によって、固定するのかしないのか、固定する位置を調整し直したりと・・。
レスポンシブ対応が当たり前の時代に、CSSだけで実現できるとメディアクエリーだけで簡単に制御できるのが、最大のメリットだと思っている。
例えばこんな感じ。
1 2 3 4 5 6
@media screen and (min-width: 768px) { .sticky { position: sticky; top: 20px; } }
こんな風にしておけば、768px以上の画面サイズの時だけ追従固定させることができる。
年々JavaScriptを使わずともCSSだけで色々なことができるようになっているけど、position: stickyが使えるようになったのは、開発者としてはかなり嬉しい。