• この記事は何
• 作成方法
  • サイドバーに要素を追加
  • css
  • javascript
• 参考文献

この記事は何

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

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

作成方法

サイドバーに要素を追加

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

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>

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

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

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

参考文献

• window.onload - Web API | MDN
• HTMLElement.offsetHeight - Web API | MDN