ブログ運営

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

投稿日:

スポンサーリンク

はてなブログに移行して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

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

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

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

よく読まれている記事

人気記事

1

Amazonといえば今や知らぬ人のいない巨大企業であり、世界的なショッピングサイトです。書籍のみならず日用品から家具まで、大変に幅広い商品を扱っているのが大きな魅力です。 ただAmazonの魅力は、A ...

2

インターネットへの接続がどこでも可能になるポケットWiFi(モバイルWiFi)。現在、さまざまな機種が存在しているため、どれを選んだら良いの?と悩んでいる人も多いのではないでしょうか。 通信速度制限、 ...

3

iPhone 8やiPhone Xの登場で一気に注目を集めたワイヤレス充電。 そもそもワイヤレス充電はAndroidスマホで既に出ており、Apple純正以外にもiPhone 8やiPhone Xで使え ...

4

ここ1~2年で一気に音楽聴き放題サービスが増えてきて、音楽を買ったり借りたりするよりも聴き放題で聴いている、という方も多いのではないでしょうか。 音楽聴き放題は様々なサービスが展開されているのですが、 ...

5

映画やドラマ、アニメなどのビデオコンテンツが見放題になる動画配信(ストリーミング)サービス。国内ではここ数年で一気に知名度が上がり、気になっている人も多いのではないでしょうか。 選ぶポイントとしては月 ...

-ブログ運営

Copyright© みやちまん.com , 2018 All Rights Reserved.