今回は、CSSだけでサイドバーを固定する方法を紹介します。
コンテンツをスクロールすると、サイドバーの一部が途中から追従する動きは、ブログなど2カラムのサイトではよく使われています。
頻繁に使われるので、実装方法を覚えてきましょう。
完成形
実際にできあがるのは以下のリンク先にあるようなサイドバーです。
サイドバーの下部にあるエリアが、スクロールに追従するようになります。
昔はJavaScriptを駆使して実装していましたが、今ではCSSだけでできるようになりました。
HTML
bodyやヘッダー、フッターのHTMLは省略します。
<div class="wrapper">
<main class="main"></main>
<aside class="sidebar">
<div class="widget"></div>
<div class="widget widget--sticky"></div>
</aside>
</div>
以下のCSSで、.widget--sticky
のエリアが固定されるように指定します。
CSS
.wrapper {
width: 94%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.main {
width: calc(100% - 300px);
}
.sidebar {
width: 280px;
}
.widget {
margin-bottom: 20px;
}
.widget:last-child {
margin-bottom: 0;
}
.widget--sticky {
position: sticky;
top: 20px;
}
デモでは分かりやすいように、各要素にグレーの色を付けてますが実際には不要なので、省略しています。
解説
このCSSのポイントは2つです。
実装のポイント
- スクロール追従させたい要素に
position: sticky
- サイドバーの親要素は
display: flex
追従させたい要素にposition: sticky
を指定します。topプロパティでどの位置で固定するかを指定します。
要素を横並びにする方法はいくつかありますが、以前ならfloat
が使われていましたが、現在では主にdisplay: flex
が使われます。
display: flex
で横並びにすると、それぞれの要素が同じ高さになります。

float
とclearfixを使う方法だと、それぞれの要素の高さが異なります。

float
を使うと、サイドバー内にスペースがない状態になってしまいます。
これでは、スクロール追従させたい要素が動かなくなってしまうのです。
ですので、サイドバーのスクロール追従をする場合は、2カラムのレイアウトをflexboxで組んでください。
今時2カラムのレイアウトでfloatを使う人はほとんどいないと思いますが、一応頭に入れておいてください。
注意点
このCSSには注意点があります。
それは、サイドバーの親要素でoverflow:hidden
を使ってはいけないという点です。
例えば、body要素やwrapperクラスにoverflow:hidden
が指定されていると、サイドバーが固定されなくなります。
対応ブラウザ
position: sticky
は現状、IE11を除く一般的なブラウザではサポートされています。
スクロール追従されなくてもレイアウトが崩れるわけではないので、IE11は気にせず使っていきましょう。