CSSだけでサイドバーを固定・スクロール追従する方法（JavaScript不要）

サイドバーを固定（追従）の実装にJavaScriptやjQueryを使う方も多いようですが、実はCSSだけでサイドバーの固定を実現させることができます。

DEMO

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での実装方法を知らなかったという人は、今回紹介した方法を導入してみて下さい。