前にスクロールの追従でクラウドさんを導入した時に動作しなくなったと言う事を書きました。何かしら競合しているのかなと思ったら、そういうのではなく、Simplicityの素のタグのサイズ(幅やら)を親テーマjavascript部のスクロール追従部分が書き変えていると言うか、正しく直しているような部分があり、それによってクラウドさん側のスクリプトに問題が出ていたようです。
そこで、サイズをアジャストしない方法で追従スクロールするスクリプトを拾ってきて改造してみました。
仕組みとしてはSimplicityに元から入ってるものと同じような感じでCSSを変更するタイプのものです。追従スクロールの部分以外はほぼ触らずに完結しているので、逆にこれを適用すると#mainの横幅が広くなったりしてサイドバーが下に回りこんでしまうかも知れません。
しかし焦るなかれ。解決方法は極簡単です。#mainに対して
border-sizing:border-box;
width:740px;
と入れるだけ。これで元のサイズになります。もしサイドバーの表示が崩れたりしなければ何もしなくても良いです。自分の環境ではいじりすぎてデフォルトがわからないので念の為。
スクリプトとしてまだ改造の余地はありますが、方法的にはこんな感じで行けるのではないかと思います。デモは現在のこのサイトのサイドバー。従来のものと同じにするように追従を画面上にセットしてあります。スイッチひとつで画面下部に追従するようにもできます。
その前に、この親テーマjavascript部のサイズアジャスト部分は、CSSでデザイン等を変更している人は注意が必要かも知れません。そのため、正しいサイズを得るための前準備としてcssの、
box-sizing:border-box;
これを活用するようにするのが良いかと思います。これを指定すると、パディングとボーダーをサイズに含めるようになります。通常はbox-sizing:content-box;(box-sizingの初期値)になってます。
同じサイズを指定していても内部領域のサイズか、ボーダー・パディングを含む領域かを見比べた時、直感的にわかりやすいのは後者です。
例えば、400px等と指定しているのにも関わらず、パディングの有無でサイズ410pxとか420pxなどと値が変わるわけです。これはつまり、javascriptやjQueryで言う所の、$(“要素”).outerWidth()や、$(“要素”).innerWidth()などに多大に影響を与えます。
クラウドさんを入れる前はさほど気にもしていませんでしたが、クラウドさんを入れた時に、本来#mainの横幅は680pxとcssにはありますが、サイズが合わなくなったので740pxで調整し直しました。親テーマ部分でのjavascriptでのアジャストの部分をコメントアウトしたらサイドバーが下に潜り込んだので、おそらくそれが原因と思います。
例えば、F12あたりで#mainを調べてみて下さい。cssでwidth:680pxとあるのに、表示は740pxになっています。これは例えば680pxのサイズが欲しいと思っていたとすれば思いがけず大きくなってしまったと思う部分です。
F12のウェブデベロッパーツールで、#mainに対してbox-sizing:border-boxを入れたら、cssと同様680pxで表示されます。680pxで表示させるとサイドバーとメインの間の隙間が広すぎるように思うかも知れません。
これらはできたら、cssで全体的に値をリセットして再度、サイズを合わし直す必要があるので、公式で対応を進めてもらう方が楽ではありますが、もし自分でやる場合は案外直す部分が多いと思うので慎重に事を進める必要があります。
主要なタグのbox-sizingリセット
|
1 2 3 4 5 6 7 |
div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } |
すべてのタグbox-sizingをリセット
|
1 2 3 4 5 6 7 |
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } |
これらは個別にするよりは、一挙にやったほうが色々便利です。以前はCSSリセットと言われるものを使うことも多かったですが、normalize.cssこんな感じのゆるいリセットもアリです。
全体的に良い感じの初期値を設定しておいて、その後で個別の各要素に必要なスタイルを設定していきます。
さて肝心のサイドバーの追従領域のスクリプトですが以下の感じにしてみました。
現在このサイトに適用している部分です。もちろん親テーマの該当部分はコメントアウトしておく必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
$(function(){ $(window).on("load", function(){ setTimeout(function(){ if ($(window).width() > 1150){ //横幅が1150px以下の時は処理しない $(window).resizeで調べるほうが良いかも /*サイドバー追従*/ var contentHeight = $("html, body").height(); var wHeight = $(window).height(); var followScrollArea = $("#sidebar-scroll"); var followScrollAreaHeight = followScrollArea.outerHeight(); var followScrollAreaPosition = followScrollArea.position(); var footer = $("#footer"); //default #footer var footerHeight = footer.outerHeight(); var sidebarWidth = $("#sidebar").outerWidth(); //var sidebarHeight = $("#sidebar").outerHeight(); //var sidebarPosition = $("#sidebar").position(); $(window).resize(function(){ wHeight = $(this).height(); }); $(window).scroll(function(){ var st = $(this).scrollTop(); /*どれぐらいでどこに表示するか*/ var visibleBottom = st + wHeight; //sidebar under space var selectSwitch = 0; // 0: top, 1: bottom switch(selectSwitch){ case 0: var followScrollAreaBottom = followScrollAreaPosition.top + followScrollAreaHeight; //チェック用 //console.log("footerheight: ",footerHeight); //console.log("visibleBottom:", visibleBottom); //console.log("leftfooter: ", contentHeight - visibleBottom); if(visibleBottom >= followScrollAreaBottom + followScrollAreaHeight) { if(footerHeight > contentHeight - visibleBottom) { followScrollArea.css({ position:"fixed", width: sidebarWidth, top: "", //topの値をリセット bottom: footerHeight - (contentHeight - visibleBottom) }); } else { followScrollArea.css({ position:"fixed", width: sidebarWidth, top: 0 }); } } else { followScrollArea.css({ position:"static", top: "auto" }); } break; case 1: var followScrollAreaBottom = followScrollAreaPosition.top + followScrollAreaHeight; if(visibleBottom >= followScrollAreaBottom) { if(footerHeight > contentHeight - visibleBottom) { followScrollArea.css({ position:"fixed", width: sidebarWidth, bottom: footerHeight - (contentHeight - visibleBottom) }); } else { followScrollArea.css({ position:"fixed", width: sidebarWidth, bottom: 0 }); } } else { followScrollArea.css({ position:"static", bottom: "auto" }); } break; } }); } },2000); //2秒後にスクリプト発動 }) }); |
あまり滑らかさはないのでちょっとなんとかしたい所。ハイライトの部分で、画面の上部に貼り付けるか画面下部に貼り付けるかを設定できます。
例えば追従領域が広い場合、領域の下が切れてしまうとかあるかも知れません。これはフッターの付近まで行かないと表示されませんが、最初から画面下に貼り付けるようにするとひとまず領域の下まで見てからスクロールになるので、このあたりはサイトの作り方によって良い方を選んでいただける点です。
ちなみに、画面のロードが始まって更に2秒後に必要な画面の高さやその他を拾いに行ってます。これでadsenseなどの読み込みとかその他諸々対応できるのではないでしょうか？