サイドバーを固定(追従)の実装にJavaScriptやjQueryを使う方も多いようですが、実はCSSだけでサイドバーの固定を実現させることができます。
CSSで実装した方が動きも滑らかですし、とても簡単です。それでは実装方法を書いていきます。
実装方法
まずはHTML。
<div class="container">
<main class="main">
<!-- メインコンテンツ -->
</main>
<div class="sidebar">
<div class="sidebar__item">
<!-- 中身 -->
</div>
<div class="sidebar__item sidebar__item--fixed">
<!-- 固定・追従させたいエリア -->
</div>
</div>
</div>
お次は、CSS。
.container {
width: 1000px;
display: -webkit-flex;
display: flex;
}
.main {
display: block;
width: 660px;
margin-right: 20px;
}
.sidebar {
width: 320px;
}
.sidebar__item {
margin-bottom: 20px;
}
.sidebar__item--fixed {
position: sticky;
margin-bottom: 0;
top: 10px;
z-index: 1;
}
どうでしょう、これだけで実装できちゃいます。
CSSは固定・追従に必要な部分だけしか書いていないので、他はデザインに応じて加えたり書き換えて下さい。
今回のポイントは二つ。
position: sticky
一つは、固定・追従させたい箇所にposition: stickyを指定することです。
ただし、親要素にoverflow: hiddenを指定している場合、position: stickyを使うことができません。
また、InternetExplorerには対応していません。最新のEdgeではついに対応するようになりました。
flexbox
もう一つのポイントは、メインコンテンツとサイドバーのレイアウトをflexboxを使って組むことです。
というのも、floatを使ったレイアウトはメインコンテンツとサイドバーの高さが揃わないので、position:stickyを使うことができません。
つまり、スクロール追従させたくても、要素が動ける高さがないのです。
ですのでflexboxを使って組んでください。
現在、flexboxはモダンブラウザならサポートされているので積極的に導入して大丈夫でしょう。
flexboxはレイアウトの自由度が高く融通が利きますし、スマホ対応も楽です。
逆に、floatでのレイアウトはclearfixなどで余計なコードが増えがちなのであまりオススメできません(flexboxが対応していない古いIEなどをサポートする場合は別)。
まとめ
CSSでできることはできるだけCSSで実装するべきですね。JavaScriptを使うとサイトの速度に影響でたり、不具合も発生しやすくなります。
特に、サイドバーの追従は要素の計算が非常に面倒なので時間もかかりますし、不具合もでやすいです。
もしCSSでの実装方法を知らなかったという人は、今回紹介した方法を導入してみて下さい。