MK Dev

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

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

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

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

stickyで固定する

サイドバーを追従固定するにはCSSのposition: sticky;を使うことで実現できる。

固定したい要素に下記のCSSを指定する。

.sticky {
  position: sticky;
  top: 20px;
}

topは固定したい要素を画面のどこに固定するかを指定する。

上記の場合は画面の上から20pxの位置に固定される。

実際に固定するサンプルは下記。

See the Pen VxXNPW by Koji (@koojy) on CodePen.

ブラウザの対応状況

position: stickyは対応するブラウザによって、使うことができない場合がある。

懸念されるIEは11では対応しておらず、Edgeのみ対応であれば、stickyを使うことが可能。

ChromeやFireFox、iOSのSafariなどIEを除く最新版は対応している。

Can I use... Support tables for HTML5, CSS3, etc

CSSで追従固定できるメリット

position: stickyで実現できるまでは、JavaScriptを使う必要があると先に書いたけど、本当にめんどくさかった。

画面のサイズが変わった時や画面幅によって、固定するのかしないのか、固定する位置を調整し直したりと・・。

レスポンシブ対応が当たり前の時代に、CSSだけで実現できるとメディアクエリーだけで簡単に制御することができるのが、最大のメリットだと思っている。

例えばこんな感じ。

@media screen and (min-width: 768px) {
  .sticky {
    position: sticky;
    top: 20px;
  }
}

こんな風にしておけば、768px以上の画面サイズの時だけ追従固定させることができる。

年々JavaScriptを使わずともCSSだけで色々なことができるようになっているけど、position: stickyが使えるようになったのは、開発者としてはかなり嬉しい。

シェア

この記事を書いた人

Koji Murakami

React.jsとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScript(TypeScript)の設計実装をメインにしながら、RubyやNodeでサーバーサイドのAPI作ったりフルスタックな動きもしています。

関連記事

Web開発のお仕事をお受けてしています。

フリーランスのエンジニアとして、フロントエンドを中心としたWeb開発のお手伝いをさせていただいております。
できることや単価など詳しい情報は下記をご覧ください。