読者です 読者をやめる 読者になる 読者になる

「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

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

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

久しぶりのCSSネタ。

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

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

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

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

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

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

続いてCSS

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

仕組み

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