デフォルトサイドバーを追従型にカスタマイズする。

アーカイブページ等、たくさんのページが表示される場合サイドバーのナビゲーションメニューが、スクロールすると、表示されなくなります。
最近、サイドバーのコンテンツをスクロールに追従して表示するWEBサイトをよく見かけます。

このページでは、CSSだけを使った簡単なサイドバー追従のカスタマイズの方法をお知らせします。

IEブラウザなどサポートされていないブラウザもありますが、従来通りで表示されますので大きな問題ではないだろうと思います。

カスタマイザーの「追加CSS」に以下のスタイルを追加します。

.yui-main,
#bd > div.yui-b{
 position:sticky;
 top: 44px;
}
#bd > .yui-b nav{
 min-height:auto!important; 
}

ブラウザサポート

Can I use... position:sticky

コメントは受け付けていません。