この記事は何

スクロールに追従する目次や広告をたまに見かけますが、同じものを実現したかったので実装方法を調べました。このサイトの広告もスクロールしたら追従するようにしました。

※要素のID名・cssの指定方法・要素の高さ変更はブログや使用しているテンプレートに従って適宜変更する必要があるので注意してください

作成方法

サイドバーに要素を追加

はてなブログのサイドバーに広告を貼り付ける領域を追加します。どこに追加したかによって後のcssの div.hatena-module:nth-last-child(2) の数値を変える必要あり。

f:id:misos:20210617124147p:plain — 広告を貼り付ける領域をサイドバーに追加します

css

div#box2-inner（サイドバーの領域）の div.hatena-module:nth-last-child(2)（最後から２番めの領域）はスクロールしても表示が固定されるように指定します。

position: sticky は固定したい要素を含んでいる親要素に指定し、画面上部から100pxの箇所に固定して表示する。

div#box2-inner div.hatena-module:nth-last-child(2){
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px;
}

javascript

デフォルトではサイドバーの領域の高さは記事領域と一致しておらず、position: stickyで指定した要素はサイドバーの領域だけしかスクロールできないので、スクロールしても追従するような挙動にできませんでした。そのため、サイドバーの領域をブログ記事本体と同じ高さにして、記事の高さだけスクロール可能にします。

<script>
(window.onload = function() {
  var boxMain = document.getElementById('main'); 
  boxMainHeight = boxMain.offsetHeight + 200;
  var box2 = document.getElementById('box2');
  box2.style.height = boxMainHeight + 'px';
  var box2Inner = document.getElementById('box2-inner');
  box2Inner.style.height = (boxMainHeight-10) + 'px';
})();
</script>