はてなブログに移行して2週間。カスタマイズも落ち着き、しっかり稼働させることができています。
しかし、ふとPC版でブログを眺めてると、何か違和感が・・・。
あれ？被ってる？
何故か被る
ブログのサイドバーは、一番下に楽天アフィリエイトのバナーを設置しています。
更に、そのバナーはスクロールすると固定されるようにし、人気記事ランキングの下をスクロールすれば、そこで固定されるはず。
ところが、上手くいかず、「注目の人気記事」までいったところでぴよっと出てきて固定化され、被ってしまう現象。。。
ソースを見ても問題ありそうな箇所はなく、謎は深まるばかり。
ちなみにソースはこんな感じ。
$(function(){
var sideLast = $("#box2-inner>div:last-child");
var sideLastTop = sideLast.offset().top;
var sideLastWidth = sideLast.width();
var win = $(window);
win.scroll(function(){
if(win.scrollTop() > sideLastTop) {
sideLast.css("position",'fixed');
sideLast.css("top",'20px');
sideLast.css("width",sideLastWidth);
}else{
sideLast.css("position",'relative');
};
});
});
悩むこと小一時間、ググってると、ようやく答えが見つかりました。
$(window).load(function()とすれば解決
それがこの記事。
僕と全く同じ現象。どうやらjQueryの読み込む順番に問題がある様子。
後は、記事に書いてある通り、
「$(function($) {」という部分を、「$(window).load(function() {」
に変更すると・・・
さっきまではここまでスクロールすると上に被りにきてた楽天バナーが下にちゃんとあります！
更にスクロールすると、問題なく固定化されました。
ソースは何も問題ないはずなのに、どうすればいいのか結構焦ってたんで、とても感謝！
ググればなんとかなりますね。バグというほどでもありませんでした、はい。