CSSだけでサイドバーを固定する

サイドバーをCSSだけでスクロールせず、画面内に固定させる方法です。

環境

HTML5
Bootstrap4.5.3

実装方法

position: sticky を利用します。

下記はサンプルです。

 

 

注意点は下記2点です。

  1. position: sticky を指定するブロックは子要素として指定すること
  2. position: stickyを指定した要素にはtopプロパティを必ず指定すること

position: stickyは、stickyを指定したブロックの親要素を起点として固定されます。また、固定させるためにstickyを指定した要素に対してtopプロパティの指定が必要となります。

参考記事

https://programming-beginner-zeroichi.jp/articles/171ed-content


--------------------------
システム開発のご要望・ご相談はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です