追従サイドバーを作る方法

position: sticky;

でできそう

position: sticky;
top: 0;

位置もセットで指定する必要がある

試しに、あるサイトでサイドバーに指定してみたら効かない。なぜ・・・

mainとasideがflexで横並びになっていた
flexで横並びにすると両方とも同じ高さになる
同じ高さだとスクロールしないのかもしれない？

スティッキーコンテナーとスティッキーアイテムという概念がある

position: sticky;を指定した要素→スティッキーアイテム
position: sticky;を指定した要素の親要素→スティッキーコンテナー

スティッキーコンテナーの中で、スティッキーアイテムは追従する
スティッキーアイテムを追従させるには、スティッキーコンテナーよりも高さが小さい必要があるぽい

flexで横並びのasideに指定しても効かなかったのはたぶんこれが理由
指定したaside→スティッキーアイテム
flexコンテナー→スティッキーコンテナー
両方とも同じ高さで追従する余白がないため追従しない

asideではなく、asideの子要素に指定すると追従した

aside→スティッキーコンテナー
asideの子要素→スティッキーアイテム

追従する余白があるから追従する

親要素にoverflow: hidden;あると効かない
横スクロール対策とかで指定していることがあるので注意

直近のスクロールする要素が基準になる