How to2018.05.11

サイドバーの追従固定を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

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が使えるようになったのは、開発者としてはかなり嬉しい。