query.fiedsidebarプラグイン

jquery.fiedsidebar.js

コンテンツがサイドバーよりも長くて、スクロールするとサイドバーが上に消えてしまいます。場合によってサイドバーの最後尾が表示された位置で止まるようにしたいと思う事があります。

そこで、簡単に設置できるjQueryのプラグインをつくってみました。

ファイルダウンロード

使い方

jQuery本体とダウンロードしたjquery.fixdsidebar.jsを読み込みます。
そして、固定させたいサイドバーを指定してfixdsidebar関数を設定します。

jquery.fixdsidebar.jsの動きの説明

ファイルや画像の読み込み時の動き

まずは画像を含めたすべてのファイルのレンダリングが終わった時にウィンドサイズからサイドバーの位置の座標などを取得します。
$(document).readyの時にではなく、 $(window).on('load',〜)で実行させるのかというと、$(document).readyはDOM構造のレンダリングは終わりますが、画像サイズの取得がまだできないからです。
$(window).on('load',〜)で画像サイズの取得できる状態になります。

そしてサイドバー自体はpositon:fixdにして固定させます。
しかし、このposition:fixdにすることで、ウィンドウ幅の計算から外れます。
サイドバーが右にある場合、ウィンドウ幅をサイドバーの位置より小さくした時に、横スクロールが出ずにサイドバーを表示させることができなくなってしまいます。
そこで、 $('body').css({'min-width':bodyminw +'px'});として設定しています。

ウィンドウの時の処理

ページレイアウトで全体をウィンドウの中央に表示するようにしている場合、Wiondow幅をリサイズした時に右のサイドバーの位置も変わってきます。
そこでサイドバーの親の移動を取得して、子に当たるサイドバーの位置も変化せてます。
またブラウザにもよりますが、リサイズしてもレンダリングや変化した数値の取得にタイムラグが発生する時があります。
その対策としてsetTimeoutでリサイズしてから取得するまで若干遅らせるようにしています。
今は数値で2とはいっていますが、20など環境によってここのサイズを変更する必要があるかもしれません。

スクロール時の動き

スクロール時の計算はシンプルにscrollTopの数値からサイドバーの縦位置の座標を当てはめています。 また、ウィンドウ幅が狭いときの横スクロール時の計算も行っています。