🦁スクロールに追従するサイドバーを作る2022/11/01に公開CSStech 完成品 解説 今回大事なのは 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 Discussion
Discussion