サイドバーを追従させる方法(CSSのみ)-40年ぶりに水泳をやり始めたジジー・スイマー

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

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

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

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

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

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

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

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

設定方法

HTML編集のCSS記述部「サイドバー」で


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

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