KJ DEV
How to

サイドバーの追従固定をCSSだけで実現する方法

一定量スクロールするとサイドバーを追従して固定させたい時は結構ある。

実現するにはこれまでJavaScriptを使う必要があったけど、CSSだけで実現できるようになってすごい楽になった。

まずはどうやってCSSだけで実現するのかサクッとサンプルを。

目次
  1. stickyで固定する
  2. ブラウザの対応状況
  3. 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が使えるようになったのは、開発者としてはかなり嬉しい。

開発で参考になった本

実際に読んでみて開発に役立った本を紹介しています。

これから本格的にデザインシステムを学んで作りたい時にとても参考になる一冊でした。デザインシステムついて幅広く触れられているけど、「tailwindを触ってデザインシステムに興味を持った」という人でも少しずつ取り入れやすいです。