THE THORの追従サイドバーがスクロール時にガタつく挙動を修正するCSSです。
最初の追従がスムーズになる上に、表示位置の調整もできるようになるため、固定ヘッダーなどと被るようなこともありません。
/*** 追従サイドバーの調整 ***/
/*コンテンツ全体*/
.l-wrapper{
align-items: normal; /*サイドバーをコンテンツと同じ高さに*/
}
/*追従とノーマルの間の空白*/
.fit-sidebar-blank{
height: 10px !important;
}
/*追従サイドバー*/
.widgetSticky.fit-sidebar.fit-sidebar-fixed{
position: sticky !important;
top: 40px !important; /*任意の始点位置*/
}
動画では分かりにくいと思いますが、以下サンプルです。
追従サイドバーは JS で動かされているため php を弄る方がスマートだとは思いますが、phpを弄るのは怖いという人が多い(私も含め)ので、CSSで無理やり調整してみました。
なお、他のパーツと被ったり画面外へはみ出すバグもありましたが、それらはいつの間にかアップデートで修正されていました。
詳細はこちら:THE THORの追従サイドバーが使い物にならない!
注意点
サイドバーをメインカラムと同じ高さにするという性質上、サイドバーにフレームがあると不格好な余白が見えてしまいます。
このCSSを使用する場合は、カスタマイズ > 共有エリア設定[THE] > サイドカラムエリア設定 のサイドカラムフレームを「無し(default)」に設定しましょう。

CSSの解説
THE THORの追従サイドバーはposition: fixedによる固定表示と JS によるスタイル変更で動いていますが、それを無理やり position: sticky による追従に変更しています。
また、それに伴ってコンテンツ全体にも変更を加えているので、CSSの使用は自己責任でお願いします。
- コンテンツ全体のレイアウト調整 .l-wrapper
- align-items: normalを指定して、メインカラムとサイドバーの始点揃えを解除(高さが同じになる)
- 通常ウィジェットと追従ウィジェットの空白 .fit-sidebar-blank
- 任意の高さ (height) に変更する(!important必須)
- 必ず指定すること
- 追従サイドバー .widgetSticky.fit-sidebar.fit-sidebar-fixed
- position: stickyによる固定表示に変更( !important 必須)
- top で任意の始点位置を指定( !important 必須)
position: stickyによる追従範囲は親要素に依存するため、サイドバーをメインカラムと同じ高さに広げてやる必要があります。
初期状態ではコンテンツ全体にalign-items: startが指定されているため始点揃えになっていますが、align-items: normalに戻してやれば自動的に同じ高さに調整されます。
