サイドバーのスクロール追従領域の表示位置

おそらくブログ村のウィジットというかブログパーツが読み込んだ時に#sidebarのheightが変わるために起こると思われます。
サイドバースクロールの各値の計算を読み込んだ後行うかスクロール中に再計算させることで対応できるかと思います。

ただこれをしようとすると大幅な改変をしないといけないんですが…。

setInterval(function (){
wrapperHeight = jQuery(‘#sidebar-scroll’).outerHeight();
sidebarHeight = jQuery(‘#sidebar’).outerHeight();
wrapperTop = sidebarHeight – wrapperHeight + 240;
}, 2000);

ここをon(“load scroll”,function(){})として組み込んで、スクロールの度に計算させるか、あるいはブログ村の読み込み後のclassの有無を調べてから追従処理をさせるかあるいは微調整させるなどをする必要があるかと思います。
単純に、
var
wrapperHeight,
sidebarHeight,
wrapperTop;

jQuery(window).on(“load scroll”, function(){
wrapperHeight = jQuery(‘#sidebar-scroll’).outerHeight();
sidebarHeight = jQuery(‘#sidebar’).outerHeight();
wrapperTop = sidebarHeight – wrapperHeight + 240;
});

と書き換えるだけで行けたら良いんですが、スコープの問題で無理かも知れません。そうなるといろいろ面倒です。まぁちょっとやってみますが、今親テーマを動かせる環境がないので、実際に正しく動かせるかは試してみないとわかりません。

Hidekichiさん

アドバイスありがとうございます。

javascript.jsに何かしら手を入れないと調整できなさそうであれば、ちょっと強引にサイズを指定して対応しようと思います。

if (pos === ‘fixed’) {
side.css({
position: pos,
top: ”,
bottom: winHeight – wrapperHeight + 40,
left: sideLeft – winLeft,
margin: 0,
marginBottom: ‘-‘+side_top_margin+’px’
});

}

これだとかなりソースがダサい感じですが、ざっと動作確認した感じ問題はなさそうなので、しばらくこれで運用してみます。

もし子テーマ側だけのカスタマイズで何か出来そうな妙案あればご教示ください。

今いじくってたら、side_top_marginを20ぐらいにしたらイケることが判明。まぁ引き続きスクリプトは見てみます。

side_top_margin = 20;

若干精度に問題がありますが、スクロールに追従するだけならこんな感じにも書けます。

サンプル: サイドバー追従簡易バージョン | codepen

#sidebarにpaddingやら背景色を入れた場合に備えて、それようの部分も加えましたが、背景色やボーダーがないなら必要ありません。

$(“#sidebar”).css({
“padding-bottom”: rst
});

↑これ。

あとちょいちょい不必要なものも入ってます(笑)