サイドバーの最後の部分が表示された位置で止まるようにするjQueryプラグイン
jquery.fiedsidebar.jsつくりました！
コンテンツがサイドバーよりも長くて、スクロールするとサイドバーが上に消えてしまう場合があります。そんな時、途中で止まってくれないかな〜と思う事しばしば。
そこで、簡単に設置できるjQueryのプラグインをつくってみました。
使い方
使い方はとっても簡単！
jQuery本体とダウンロードしたjquery.fixdsidebar.jsを読み込みます。
そして、固定させたいサイドバーのClassやIDなどを指定してfixedsidebar関数を実行するだけです。
スクリプトの説明
簡単なファイルなのですが、中身でどんな処理をしているのかの説明です。
ファイルや画像の読み込み時の動き
まずは画像を含めたすべてのファイルのレンダリングが終わった時にウィンドサイズからサイドバーの位置の座標などを取得します。
$(document).readyの時にではなく、 $(window).on(‘load’,〜)で実行させるのかというと、$(document).readyはDOM構造のレンダリングは終わりますが、画像サイズの取得がまだできないからです。
$(window).on(‘load’,〜)で画像サイズの取得できる状態になります。
そしてサイドバー自体はpositon:fixedにして固定させます。
ところが、このposition:fixedにすることで、ウィンドウ幅の計算から外れてしまいます。
ウィンドウ幅をサイドバーの位置より小さくした時に、横スクロールが出ずにサイドバーを表示させることができなくなってしまいます。
そこで、 $(‘body’).css({‘min-width’:bodyminw +’px’});として設定しています。
ウィンドウの時の処理
ページレイアウトで全体をウィンドウの中央に表示するようにしている場合、Wiondow幅をリサイズした時に右のサイドバーの位置も変わってきます。
そこでサイドバーの親の移動を取得して、子に当たるサイドバーの位置も変化せてます。
またブラウザにもよりますが、リサイズしてもレンダリングや変化した数値の取得にタイムラグが発生する時があります。
その対策としてsetTimeoutでリサイズしてから取得するまで若干遅らせるようにしています。
今は数値で2とはいっていますが、20など環境によってここのサイズを変更する必要があるかもしれません。
スクロール時の動き
スクロール時の計算はシンプルにscrollTopの数値からサイドバーの縦位置の座標を当てはめています。
また、ウィンドウ幅が狭いときの横スクロール時の計算も行っています。
サイドバーのレイアウトの仕方（CSSの設定）によっては、うまく動かない場合も考えられますが、微調整で対応できると思います。
