1. はじめに

このデモは、本文をスクロールしてもサイドバーだけが画面内に留まってついてくる様子を確認するための ダミー本文です。iframe の中でスクロールしてサイドバーの挙動を確かめてください。

2. 使いどころ

長い記事のページで、目次や広告枠を常に見える位置に置いておきたいときに使われます。読者が本文の どこまで読んでいても、サイドバーの内容にすぐアクセスできるのが利点です。

3. 実装のポイント

CSS の position: sticky を使うと、JavaScript なしで実現できます。サイドバーを含む 親要素の高さより、サイドバー自体の方が低いことが条件になります。

4. 注意点

固定ヘッダーがある場合は、サイドバーがヘッダーの下に隠れないよう top の値をヘッダーの 高さぶん空けておく必要があります。

5. まとめ

ここまでスクロールしても、右のサイドバーはずっと画面内に留まっていたはずです。これが追従サイドバー の基本的な挙動です。