WordPressのサイトにスクロールしても追従するサイドバーを position: sticky で設置する

右側のサイドバーだが，これがスクロールに合わせて動いてしまうと，記事の長さが長いときに，右側に空白が続き寂しいことになってしまう．
そこで，スクロールしても，サイドバーは目次を表示したところで止まり，コンテンツが常に表示されるようにした．

Flexboxで並べる

ところで，このサイトの single.php は概ね次のような構成になっている．

<?php get_header(); ?>
<div class="container">
    <div class="contents">
         <!--本文の内容-->
    </div>
    <div id="sidebar_wrap" class="sidebar_wrap">
        <?php get_sidebar(); ?> <!--サイドバー-->
    </div>
</div>
<?php get_footer(); ?>

これを今までは float を用いて並べていたのだが， position: sticky を導入するにあたって Flexbox に変更する．

Flexbox の仕様について詳しくまとまっており，参考にさせて頂いたサイトはこちら

• 「【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり) 」creive　https://creive.me/archives/15427/

というわけで，CSSの次の部分を書き換えた．

.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.contents {
    width: 70%;
}
.sidebar_wrap {
    width: 27%;
}

justify-content: space-between; で，contents と sidebar_wrap の幅の残りの3%を間の余白としている．
align-items: flex-start; で，縦方向の要素の配置を上に揃えている．

position: sticky を記述する

次に，サイドバーをストロークに対し，一定の箇所から追従するようにする．

参考にさせて頂いたサイトは以下．

• 「CSSだけでサイドバーを固定・スクロール追従する方法（JavaScript不要）」 Tech dig　https://tech-dig.jp/csstech-dig.jp/cssだけでサイドバーを固定・スクロールに追従す/
• 「FlexBox と position sticky でサイドメニューをスクロール途中で固定」趣味のページ　https://syumi3.com/sonota/html_pasokon/flexbox-sticky.html
• 「css position stickyが効かない時の解決策！Flex-box使用時に効かなくなる？」CHEATPARK – 神戸三宮のシステム開発会社CHEAT　https://cheat.co.jp/blog/archives/1896

やることとしては，追従させたい要素に position: sticky を記述すればよい．

また，topプロパティで，スクロールされた時に固定される位置を指定する．

以上より，スタイルシートに以下のように書き加えた．

.sidebar_wrap {
    width: 27%;
    box-sizing: border-box;
    position: sticky;
    top: -19.3rem; /*sidebar固定高さの設定*/
}

これで，ストロークしても追従するサイドバーが設置できた．