読者です 読者をやめる 読者になる 読者になる

みやちまん.com

ネットショップコンサルティングを展開する株式会社302代表ブログ

はてなブログでカスタマイズしたサイドバー固定のバグが解消!

スポンサーリンク

はてなブログに移行して2週間。カスタマイズも落ち着き、しっかり稼働させることができています。

しかし、ふとPC版でブログを眺めてると、何か違和感が・・・。

f:id:masa381man:20160325121658p:plain

あれ?被ってる?

何故か被る

ブログのサイドバーは、一番下に楽天アフィリエイトのバナーを設置しています。

更に、そのバナーはスクロールすると固定されるようにし、人気記事ランキングの下をスクロールすれば、そこで固定されるはず。

ところが、上手くいかず、「注目の人気記事」までいったところでぴよっと出てきて固定化され、被ってしまう現象。。。

ソースを見ても問題ありそうな箇所はなく、謎は深まるばかり。

ちなみにソースはこんな感じ。

$(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()とすれば解決

それがこの記事。

blog.yutorigoto.com

僕と全く同じ現象。どうやらjQueryの読み込む順番に問題がある様子。

後は、記事に書いてある通り、

「$(function($) {」という部分を、「$(window).load(function() {」

に変更すると・・・

f:id:masa381man:20160325122912p:plain

さっきまではここまでスクロールすると上に被りにきてた楽天バナーが下にちゃんとあります!

f:id:masa381man:20160325122945p:plain

更にスクロールすると、問題なく固定化されました。

ソースは何も問題ないはずなのに、どうすればいいのか結構焦ってたんで、とても感謝!

ググればなんとかなりますね。バグというほどでもありませんでした、はい。

CEO BLOG 302inc.

twitter / facebook / Google+

Copyright© CEO BLOG 302inc. , 2015 All Rights Reserved.