THE THOR

THE THOR｜追従サイドバーのガタつく挙動を修正する

THE THORの追従サイドバーのガタつく挙動を修正するCSS

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)」に設定しましょう。

THE THORのサイドカラムフレーム設定

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に戻してやれば自動的に同じ高さに調整されます。

align-itemsによるサイドバーの高さ揃え