好奇心の足跡

飽きっぽくすぐ他のことをしてしまうので、忘れないため・形にして頭に残すための備忘録。

Bloggerの可変長のウィジェットをスクロールバーに追従させる(固定位置に表示)

可変長のウィジェットだと、長過ぎて固定位置に表示したままだと最後まで表示されない、なんて事が起こるので、その対策も含め。
引越し前のbloggerで書いていたときに使っていました。

やりたいこと

  1. Bloggerウィジェットをスクロールバーに追従させる
  2. 対象ウィジェットは右か左のブロックの一番下に表示
  3. スクロースが対象ウィジェットまで来たら、その後はスクロールされても固定位置に表示
  4. ウィジェットがブラウザのウィンドウの高さより高い場合の対応
  5. フッターに被せないよう、高さを調節する
  6. ウィジェット内でスクロールさせる

Bloggerウィジェットをスクロールバーに追従させる(固定位置に表示)

ウィジェットがブラウザのウィンドウの高さより高い場合の対応

  • 上記のままだと、最後までスクロールしたときに、長めのウィジェットではフッターに被ったり、最悪途中で切れて最後まで表示されません
    • このブログの場合、長めの記事を書くとindexが長ーくなって表示しきれない事態に。
  • まず、footer全体の長さを取得出来るようにするために、footer部分にidをふっておきます
    • HTMLの編集から<footer>を探し、<footer id='footer-outer'>に書き換えます
  • 次に、上記スクロールバーに追従させるときに書いたscriptの頭の方(function($) {の直下あたり)に下記を挿入します。
  var footH = $('#footer-outer').height() + 20; // 20は調整値。スクロール最後のウィジェットとfooterの間隔になります。お好みで。
  var wH = $(window).height() - footH - 10; // 10は、上記で指定したウィジェットの開始offset。
  var divH = $(&#39;div#HTML8&#39;).innerHeight(); // HTML8は、上記リンクの"固定したい要素名"
  if(divH &gt; (wH)){
    if(wH > 100){ // ウィジェットの高さの最小値を指定
      $('div#HTML8').css('height',wH+'px'); 
    } else {
      $('div#HTML8').css('height','100px'); 
    }
    $('div#HTML8').css('overflow','scroll'); 
  }

これでウィジェットが長かったときの高さ調節、スクロールバー表示ができるようになりました!