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; を使用してください。

トップへ