サイドバーを追従させる方法(CSSのみ)

長い記事で下にスクロールするとサイドバーがなくなってかなり寂しくなるのだけれども、サイドバーを追従させるととてもいい感じになります。

ふじやんさんの「サイドバーウィジェットを追従させる方法」を参考にさせていただきました。

...というより、そのままです。

【QooQ】サイドバーウィジェットを追従させる方法

QooQ で何故かついてこないサイドバーウィジェットを追従させる方法

fujilogic.blogspot.com

FlexBox とか stickyコンテナとかの内容は難しすぎてわかりませんが、

CSSのみで、こんなに簡単に設定できるなんて本当にありがたいです。

ふじやんさんありがとうございます。

設定方法

#sub-content {
	display: flex;
}
#sub-content .widget:last-child {
	position: sticky;
	top: 0;
}

• 一番下に JavaScript 等の見えないウィジェットを置いてる場合は、上に移動させるか、 #sub-content .widget:last-child の部分を 追従させたいウィジェットの ID に変えてください。


• ナビバーを固定させてる場合は、top の値をナビバーの高さに合わせて調整してください。