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

今回は、CSSだけでサイドバーを固定する方法を紹介します。

コンテンツをスクロールすると、サイドバーの一部が途中から追従する動きは、ブログなど2カラムのサイトではよく使われています。

頻繁に使われるので、実装方法を覚えてきましょう。

完成形

実際にできあがるのは以下のリンク先にあるようなサイドバーです。

DEMO

サイドバーの下部にあるエリアが、スクロールに追従するようになります。

昔は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;
}

デモでは分かりやすいように、各要素にグレーの色を付けてますが実際には不要なので、省略しています。