今回実装する動きは、「コンテンツをスクロールすると、サイドバーのコンテンツの終わりで、固定される動き」です。

スクロールしていくと、初めはサイドバーも同じようにスクロールされますが、サイドバーのコンテンツが終わると、追従される動き。

ブログなどの2カラムのサイトで、よく使用されています。

JavaScriptを使用せず、CSSのみでの実装方法について解説します。

• Contents
• HTML
• CSS
• 解説

HTML

<div class="wrapper">
    <div class="main"> </div>
    <div class="sidebar"> </div>
</div>

必要な要素以外は省略しています。

CSS

.wrapper {
	display: flex;
	justify-content: space-between;
}
.main {
        width: 70%;  // 任意の値
}
.sidebar {
	position: sticky;
  	align-self: flex-end;
        width: 30%;  // 任意の値
 	bottom: 20px;  // 任意の値
}

解説

これだけです。

align-selfはalign-itemsの値を上書きします。

サイドバーのみ下揃えにすることで、スクロールした時に、サイドバーのコンテンツ終わりに固定して追従します。

簡単に実装できるので、2カラムのサイトや、ブログのレイアウトに是非活用ください。

注意点

親要素にalign-items: flex-end;を使用すると、一見実装できたように見えますが、全て下で固定してしまうので、mainのコンテンツがsidebarのコンテンツよりも短い場合、崩れてしまいます。

親要素にover-flow: hidden;を使用していると、常に一番下で固定されてしまい、追従の動きにはなりません。

対応ブラウザ

IEを除く一般的なブラウザではサポートされています。

スクロール追従されなくてもレイアウトが崩れるわけではないので、IEは気にせず実装していきましょう。