スクロールしてもついてくるサイドバーのメモ

2カラムビューの状況（おおむねタブレット端末以上）で、スクロールしたときに付いてきて固定されるサイドバーを設定してみました。



続きを読む 🔽まず大前提として、スクロールしても追従させたい要素にはCSSでpositionをstickyに設定します。
position:sticky;
当サイトは骨組みとなる部分はグリッドレイアウトというCSS3の手法でレイアウトされているのですが、このグリッドレイアウトとstickyはなかなか食い合わせが悪かったようで一筋縄ではいかず苦労しました。

【参考】：CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法 | コリス

グリッドレイアウトとstickyの共存には一工夫必要なようです。

ただ、私の場合それ以前の所で引っ掛かっていたようで、親要素に高さ指定がされていなかったことと、topの位置を指定していなかったことがstickyが効かない原因でした。

【参考】：【CSS】position:stickyが効かない時の原因と解決方法 - ジャングルオーシャン

最終的に以下のようなコードにすることで無事に追従するサイドバーが完成。
.myaside（親要素）{
    height:100%;
    display:block; //サイドバー自体はグリッド上に配置する必要があるが、サイドバーの中はグリッドレイアウトでなくても良いのでblock要素に変更しました
       --以下略--
}
.mysticky（追従させたい要素）{
    position:sticky;
    top:50px;
    display:block;
       --以下略--
}
ちなみにサイドバーのうち追従するウィジェットと追従しないウィジェットはそれぞれ別のウィジェットエリアとして設定しています。
テーマのソース（sidebar.php）で、下記のように追従させたい方のウィジェットエリアにのみ.mystickyというクラスを付与しています。





主に目次を追従させたくて追従サイドバーエリアを作ったのですが、ついでに広告バナーも追従させています。
（とはいえ、よっぽど長い記事でなければ追従開始する前に記事の方が先に終わります。）

広告バナーはなるべく上品なものを選んでいるつもりですが、邪魔になっていたらすみません。
気になる方は各自アドブロ等で対応してください。

【追記】
ついでにここのMemoのサイドバーも追従にしてみました。（おおむねタブレット端末以上のみ）
ここにはいろいろ書き散らかしているので、検索性が上がって便利になったと思います。

#自作テーマ #wordpress #備忘録