スクロールに追従するサイドバーを作る

完成品

解説

今回大事なのは

position: sticky;

の部分です。これでサイドバーが固定されます。

サイドバーのところは高さと位置を指定する必要があります。今回で言えば

top: 1rem;
height: 10rem

の部分です。max-height で指定すると、コンテンツによって可変の高さにできるので良いと思います。

また、 rem ではなく vh を使うと、画面の高さに対しての高さになるので、ウィンドウが小さくとも、サイドバーが見切れることはなくなるはずです。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

https://developer.mozilla.org/ja/docs/Web/CSS/position

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units