「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に任せた方が色々と楽なのかもしれない。

Tips

Text by pushman