「position: sticky;」だけで下に固定するときの注意
JavaScriptで高さを計算
「position: sticky;」でとても手軽にサイドバーの固定ができて、気分爽快。最初は上にしか固定できなかったけれど、「align-self: flex-end;」を追記して、下に固定できた。
上に固定するか、下に固定するかは、好みの問題だと思うけれど、コンテンツが無くなってから固定されるので、個人的には下に固定する方が好み。
ただ、この方法だと固定させたい要素の高さがwindowよりも小さい場合、いきなり下に固定されてしまうので意図したレイアウトにならない。
当サイトはPC用のレイアウトは2カラムにしており、コンテンツは「#main」、メニューは「#menu」としている。コンテンツとメニューの高さはページによるので、どちらにも「position: sticky;」を指定している。
CSS
このままだと、#main、#menuがwindowの高さを超えない場合いきなり下に固定されてしまうので、jQueryを利用してwindow、#main、#menuの高さを比較し、適切な場所に固定されるようにした。
JavaScript
CSSのみでいろんなレイアウトが実現できるようになったけれど、ユーザーの環境に依存するものはJavaScriptを使わざるを得ないし、どうせJavaScriptを使うなら固定させるのもJavaScriptに任せた方が色々と楽なのかもしれない。
関連記事
CSSだけでサイドメニューの固定
「position: sticky;」が効かない場合
Tips
Update：
