スクロールすると追従してくるStickyboxを実装する方法

縦に長いページなどで、サイドバーの要素がスクロールしても画面内に留まる「Sticky（固定）」なUIは非常によく使われています。

CSSの position: sticky とは？

JavaScriptを使わなくても、現在のモダンブラウザではCSSのみで完結可能です。

.sidebar-item {
  position: -webkit-sticky;
  position: sticky;
  top: 20px; /* 画面上部から20pxのところで固定 */
}

注意点として、親要素が「overflow: hidden;」や「flex/gridの都合」で高さ不足になっていると効かない場合があります。

実装時のポイント

• 要素の親コンテナが十分に高いこと
• topプロパティを正確に指定すること
• モバイル環境での可読性に注意（画面を埋め尽くさないようにする）

より詳細な技術解説は、私のブログ内の関連リンクもぜひ参考にしてください。