追従するサイドバー付きコンテンツを作ろう

今回は、CSSでサイドバーを追従させる方法を紹介します。
コンテンツをスクロールするとサイドバーが追従する動きは、2カラムのブロックでよく使われます。

方法としては、CSSのpositionプロパティ「sticky」を使って追従サイドバーを実装します。
javascript を使わず、短いコードで実装が可能です。（サンプルあり）

sticky とは

CSS のposition プロパティの１つです。
スクロール時に特定の範囲だけ追従させ、終点で停止します。

追従するサイドバー付きコンテンツのサンプル

実際のサンプルを用意しました。コードを最小限に抑えています。
コピペでそのまま実装可能です。

実装コード

htmlソースコード

<div class="sec-in wrap-sidebar">
  <main class="contents">
    コンテンツ
  </main>
  <aside class="sidebar">
    <div class="sidebar-in">
      サイドバー
    </div>
  </aside>
</div>

解説

・「wrap-sidebar」・・・全体を囲う要素
・「contents」・・・・・コンテンツ要素
・「sidebar」・・・・・・サイドバー要素
・「sidebar-in」・・・・・サイドバーのインナー要素

html は特に複雑な要素はありません。
「sidebar」の子要素として、「sidebar-in」が必要になります。

CSSソースコード

.wrap-sidebar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 20rem;  /* 左右コンテンツの大きさ */
  gap: 6rem;  /* コンテンツ間の余白 */
}
.contents {
  background: gray;
  height: 1000px;
}
.sidebar-in {
  position: sticky;
  top: 0;
  background: red;
  height: 300px;
}

解説

sticky は「sidebar」ではなく、子要素の「sidebar-in」に適応させてください。

左右コンテンツの大きさ、余白は自由に設定してください。
背景色や、高さ（height）は視覚的にわかりやすくするために追加しているもので、
動作には必要ありません。

position: sticky; の対応状況

主要ブラウザは対応しているので、問題なく使用できます。

https://caniuse.com/?search=sticky

以前はIE の存在がありましたが、IE は主要ブラウザから外れています。
（edge は対応済み）

まとめ

今回は実際のサンプルを用いて、追従サイドバー付きコンテンツを実装しました。
少ないCSSのみで簡単に追従サイドバーを実装することができます。
主要ブラウザにも対応しており、様々なシーンで利用できます。

コピペで簡単に実装できるので、ぜひ使ってみてください。

thumb_up いいね 47

いいねありがとうございます！