めも

メモ.

はてなブログのサイドバーにスクロールに追従するコンテンツを置く

この記事は何

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

※要素の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)(最後から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>

DOM要素が読み込まれたあとに実行されるように、window.onloadを使用しています。

load イベントは文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了しています。引用元:window.onload

  • document.getElementById('main');: 記事本体の高さ
  • document.getElementById('box2');: サイドバーを取得して、高さを記事本体+200pxに設定
  • document.getElementById('box2-inner');: サイドバーの内部のdivを取得して、こちらも高さを調整

参考文献

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。