Web制作2023.2.25
React/Next.jsの学習におすすめの本(参考書)を目的別に計4冊紹介!
転職と副業と独学を発信する雑記ブログ
今回実装する動きは、「コンテンツをスクロールすると、サイドバーのコンテンツの終わりで、固定される動き」です。
スクロールしていくと、初めはサイドバーも同じようにスクロールされますが、サイドバーのコンテンツが終わると、追従される動き。
ブログなどの2カラムのサイトで、よく使用されています。
JavaScriptを使用せず、CSSのみでの実装方法について解説します。
<div class="wrapper">
<div class="main"> </div>
<div class="sidebar"> </div>
</div>
必要な要素以外は省略しています。
.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は気にせず実装していきましょう。