(cache) コピペ一発！サイドバー固定！

サイドバー固定させようぜ！

※導入方法だけ読みたい方は「きっかけ」をすっ飛ばして「導入」からご覧ください。

※はてなブログ以外では試していないのでどうなるか分かりません。

きっかけ

とあるブログを見ていたら、サイドバーの一番下のモジュールがスクロール最中に上部で固定された。

f:id:s_dango:20160216143804p:plain

かっこいいねえ。

導入したいねえ。

固定したらもしかしたら読者とフォロワー増えるんじゃねえ？

などという夢見事を考えながらサイドバー固定を導入することに。

そんなわけでググってみたらこんな記事を発見。

www.dekihiroyoshi.com

どうやらコピペ数発で導入できるらしい。

そしてはてブ見てみたらとある方もこれを導入したようだ。

で、早速コピペしてみたら…

f:id:s_dango:20160216125839p:plain

あれれれれれれれ！！！！？

なんだなんだ！

プロフィールがとんでもねえタイミングで飛んできた！

これは見たらブラウザバックしちゃうレベルでよろしくない！

なにがいけなかったのかを調べてみたら、以下のような記事を発見。

jQueryが思い通りに動かない時は読み込みの順番を遅らせてみよう。Twitterの優しさに号泣した話。

一応説明しておくと今回の不具合はjQueryの読み込む順番に原因がありました。
具体的に言いますと、サイドバーに設置していた画像よりもjQueryの方が先に読み込まれてしまうために発動のキーにしていた高さが画像の分計算されず、予定よりも高い位置でjQueryが発動してしまったということです。
これを解決するには
$(function($) {
という部分を、
$(window).load(function() {
とするだけ。
後者は「画面が完全にロードされたら発動」という意味のコードです。HTMLやCSSを全て読み込んだ後に飾りとしてのjQueryを読み込むので不具合が起きづらいと先ほどの記事の著者は書いていました。

なるほどなるほどー。

なんとなく漠然と意味は分かった気がする！

要するにjQueryの読み込む順番に問題があったんだな！

うん！

これを参考にして書き直したものを以下に記載。

導入

導入するとサイドバーの一番下のモジュールがスクロールしてもページ上部で固定される。

１．まずははてなブログの「デザイン」編集画面へ。

２．「カスタマイズ」→「フッタ」

f:id:s_dango:20160216132512p:plain

３.フッタに以下のコードをコピペするだけ！

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  <script> $(window).load(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'); 　　}; 　}); }); </script>

これで終わり！

コピペ一発！簡単！

PCでご覧の方は、今ごろサイドバーにプロフィールがついてきているはず！

f:id:s_dango:20160216140843p:plain