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

レスポンシブのサイドバー固定をCSSのみで実装する

久しぶりのCSSネタ。

サイドバーをfixedで横に固定したいときが多くあります。そのとき問題なのが、position:fixedの起点がブラウザの端になってしまうこと。

通常のサイトだと単純にfixedで問題ないのですが、レスポンシブのサイトだとブラウザ起点のfixedが恨めしい時が多くあります。

そんな時、親要素を起点にfixedしてくれたらいいのになと思っていたら、こんな方法がありました。

JSとかjQueryでもいいのでしょうが、CSSだけで対応できたら楽チンですし動きも軽いです。

HTMLはなんの変哲もありません。 

縦の動きだけに追従するサイドバー

続いてCSS。

「position:fixedの起点を親要素にするCSS」のCSS

仕組み

このCSSのポイントは、positionで左右位置を指定せずに、marginで位置を調整すること。fixedとabsoluteはtopやleftを指定せずにかけた場合は親要素の左上が起点になるんですね。そこで、marginで位置を指定してあげて完成！