CSSを3行書くだけ!追従するサイドメニューの作り方(JavaScript不要)
追従するサイドメニューをCSSのみで作ります。
.sidebar {
position: sticky;
top: 60px;
align-self: flex-start;
}
position: sticky;
は、追従させたい要素に使うCSSプロパティです。スクロールをしても要素を固定して表示できます。今回は、サイドバーを画面上部から一定の位置に固定するために使用します。
top: 60px;
は、サイドバーの位置を指定します。ここでは上から60ピクセルの位置にサイドバーを固定しています。必要に応じて値を変更してください。
align-self: flex-start;
で親要素の上端にサイドバーを配置します。
注意点
position: sticky;
の注意点になりますが、親要素に overflow: hidden;
があるとうまく動作しないです。
また、メインコンテンツとサイドメニューという2カラムで作ることが多いと思いますが、2カラムにするには display: flex;
や display: grid;
を使用してください。