EDIT

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

｜2023/09/06 ｜2
アイキャッチ

サイドバーの一番下のコンテンツを、下にスクロールしても追従してくるようにしているブログやサイトをよく見かけますよね。

人気の投稿だったりプロフィールだったり人によって様々ですが、特にアピールしたいコンテンツを常に画面内に表示させられる有効な手段の一つです。

ちなみに QooQ の前身の Tokyo ではデフォルトで「ついてくるサイドバー」がありましたけど、あちらは jQuery で追従させてます。

JavaScript なしでも簡単に実装可能で、以前記事に書いたナビバーを上部に固定させる方法と同じく、追従させたいウィジェットの CSS に position:sticky と top の値を追記するだけで実現出来る筈なのですが、いざウチのブログでやってみようとしたら…できない Σ(￣ロ￣lll)

スクロールしても付いてこない…
うちではページリストを置いてるけど、別のウィジェットに変えてもダメ…
position:fixed ならくっつくけど付きっぱなしじゃ意味ない…
一番下以外のウィジェットなら(一応)ついて来るのに何故か肝心な一番下だけダメ…

何故だ(~_~;)

色々試行錯誤してみた結果、QooQ の場合は以下の CSS を追記するだけで解決することが判明しました。

#sub-content {
    display: flex;
}

たったこれだけw
ですが、これにたどり着くまで結構悩みましたよ(^^;

あとは追従させたいウィジェットの ID を調べて CSS を追記するだけですが…どうせ追従させるのは一番下のウィジェットなわけですから、以下の様に CSS を追記すればOKです。

#sub-content .widget:last-child {
    position: sticky;
    top: 0;
}
  • 一番下に JavaScript 等の見えないウィジェットを置いてる場合は上に移動させるか、
    #sub-content .widget:last-child の部分を 追従させたいウィジェットの ID に変えてください。
  • ナビバーを固定させてる場合は、top の値をナビバーの高さに合わせて調整してください。

以上、QooQ ユーザーのお役にて立てれば幸いです。