追従サイドバーとは

本文をスクロールしても、サイドバーだけが画面内に留まってついてくるレイアウト。

概要

本文が長いページで、本文をスクロールしていってもサイドバーの内容だけは画面の中に留まってついてくるレイアウトです。目次や広告枠、関連リンクなど、常に見えていてほしい情報をサイドバーに置くときに使われます。CSS の position: sticky を使うと、JavaScript なしで実現できます。

別名

表記ゆれ：追従サイドバー、スティッキーサイドバー、固定サイドバー、sticky sidebar

「固定サイドバー」は常に画面に貼り付いたまま動かない実装（position: fixed）を指すこともあるため、本文と一緒にある程度スクロールしたうえで追従させたい場合は「追従サイドバー」「スティッキーサイドバー」と呼ぶ方が意図が伝わりやすくなります。

AI への伝え方

「サイドバーを追従させて」で通じます。position: sticky は、サイドバーを含む親要素の高さよりサイドバー自体の方が低いときにしか効果が見えない点に注意してください。ヘッダーが固定表示されている場合は、サイドバーがヘッダーの下に隠れないよう「ヘッダーの高さぶん top を空けて」と伝えると仕上がりがずれません。効かないときの典型的な原因は、親要素の高さが本文より低いこと（flex の親に align-items: flex-start が付いていると、サイドバー側の親要素が中身と同じ高さに縮んでしまい追従の余白がなくなります）と、祖先要素のどこかに overflow: hidden（または auto・scroll）が指定されていて包含ブロックが切れてしまうことの 2 つです。

似たパーツとの違い

「サイドバー」はページの脇に置く領域そのものを指す言葉で、追従サイドバーはその表示のしかた（スクロールに対する挙動）の一種です。「固定ヘッダー」も同じ position: sticky（または fixed）の仕組みを上部で使ったもので、追従サイドバーとは追従する向きと対象が異なるだけで考え方は共通しています。

デモ

コード

HTML

<div class="sticky-sidebar-demo">
  <main class="sticky-sidebar-demo__main">
    <h2>1. はじめに</h2>
    <p>
      このデモは、本文をスクロールしてもサイドバーだけが画面内に留まってついてくる様子を確認するための
      ダミー本文です。iframe の中でスクロールしてサイドバーの挙動を確かめてください。
    </p>
    <h2>2. 使いどころ</h2>
    <p>
      長い記事のページで、目次や広告枠を常に見える位置に置いておきたいときに使われます。読者が本文の
      どこまで読んでいても、サイドバーの内容にすぐアクセスできるのが利点です。
    </p>
    <h2>3. 実装のポイント</h2>
    <p>
      CSS の <code>position: sticky</code> を使うと、JavaScript なしで実現できます。サイドバーを含む
      親要素の高さより、サイドバー自体の方が低いことが条件になります。
    </p>
    <h2>4. 注意点</h2>
    <p>
      固定ヘッダーがある場合は、サイドバーがヘッダーの下に隠れないよう <code>top</code> の値をヘッダーの
      高さぶん空けておく必要があります。
    </p>
    <h2>5. まとめ</h2>
    <p>
      ここまでスクロールしても、右のサイドバーはずっと画面内に留まっていたはずです。これが追従サイドバー
      の基本的な挙動です。
    </p>
  </main>
  <aside class="sticky-sidebar-demo__aside">
    <div class="sticky-sidebar-demo__box">
      <p class="sticky-sidebar-demo__box-title">目次</p>
      <ul>
        <li>1. はじめに</li>
        <li>2. 使いどころ</li>
        <li>3. 実装のポイント</li>
        <li>4. 注意点</li>
        <li>5. まとめ</li>
      </ul>
    </div>
  </aside>
</div>

CSS

.sticky-sidebar-demo {
  display: flex;
  gap: 24px;
  font-family: sans-serif;
  color: #333333;
}

.sticky-sidebar-demo__main {
  flex: 1 1 auto;
  min-width: 0;
}

.sticky-sidebar-demo__main h2 {
  margin: 24px 0 8px;
  font-size: 16px;
}

.sticky-sidebar-demo__main h2:first-child {
  margin-top: 0;
}

.sticky-sidebar-demo__main p {
  margin: 0 0 16px;
  line-height: 1.8;
}

.sticky-sidebar-demo__main code {
  padding: 1px 4px;
  border-radius: 4px;
  background: #f2f2f2;
}

.sticky-sidebar-demo__aside {
  flex: 0 0 160px;
}

.sticky-sidebar-demo__box {
  position: sticky;
  top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: #f2f2f2;
}

.sticky-sidebar-demo__box-title {
  margin: 0 0 8px;
  color: #0017c1;
  font-weight: bold;
}

.sticky-sidebar-demo__box ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.8;
}