可変長のウィジェットだと、長過ぎて固定位置に表示したままだと最後まで表示されない、なんて事が起こるので、その対策も含め。
引越し前のbloggerで書いていたときに使っていました。
やりたいこと
- Bloggerのウィジェットをスクロールバーに追従させる
- 対象ウィジェットは右か左のブロックの一番下に表示
- スクロースが対象ウィジェットまで来たら、その後はスクロールされても固定位置に表示
- ウィジェットがブラウザのウィンドウの高さより高い場合の対応
- フッターに被せないよう、高さを調節する
- ウィジェット内でスクロールさせる
Bloggerのウィジェットをスクロールバーに追従させる(固定位置に表示)
- これに関してはいろいろな方が記事を書いているので、下記を参考にさせていただきました。
【Bloggerカスタマイズ】サイドバーを固定してスクロール追従広告を設置する方法(jQueryを利用)
ウィジェットがブラウザのウィンドウの高さより高い場合の対応
- 上記のままだと、最後までスクロールしたときに、長めのウィジェットではフッターに被ったり、最悪途中で切れて最後まで表示されません
- このブログの場合、長めの記事を書くとindexが長ーくなって表示しきれない事態に。
- まず、footer全体の長さを取得出来るようにするために、footer部分にidをふっておきます
- HTMLの編集から
<footer>
を探し、<footer id='footer-outer'>
に書き換えます
- HTMLの編集から
- 次に、上記スクロールバーに追従させるときに書いたscriptの頭の方(
function($) {
の直下あたり)に下記を挿入します。
var footH = $('#footer-outer').height() + 20; // 20は調整値。スクロール最後のウィジェットとfooterの間隔になります。お好みで。 var wH = $(window).height() - footH - 10; // 10は、上記で指定したウィジェットの開始offset。 var divH = $('div#HTML8').innerHeight(); // HTML8は、上記リンクの"固定したい要素名" if(divH > (wH)){ if(wH > 100){ // ウィジェットの高さの最小値を指定 $('div#HTML8').css('height',wH+'px'); } else { $('div#HTML8').css('height','100px'); } $('div#HTML8').css('overflow','scroll'); }
これでウィジェットが長かったときの高さ調節、スクロールバー表示ができるようになりました!