サイドバーなどの要素を固定するjQueryプラグイン「jquery.frix.js」

明けましておめでとうございます、ウェブラボクリエイターズメモです。

新年一発目は、サイドバーなどの要素を固定するjQueryプラグイン「jquery.frix.js」を紹介したいと思います。

ただ固定するだけならばCSSで簡単に固定できますが、ウィンドウの高さから固定した要素がはみ出た時に下の要素が見切れてしまうので処理に困ると思います。

ウィンドウの高さから固定した要素がはみ出てる時は、下スクロール時には一番下までいったら固定、上スクロール時には一番上までいったら固定といった動きが理想ですよね。

正直自分で作るの面倒だな・・・、と考えてた時に出会ったのがこのプラグインです。

言葉だけではわからないと思うのでまずはDEMOをご覧ください！

→DEMO

これならユーザーにもとてもやさしいですね。

配布元は以下になります。

→webwedge

以下が実装した際の、主要な部分のソースとなります。

■HTML

HTMLはわかりやすくする為、単純なものにしました。

■HTML上スクリプト部分

jQuery本体とプラグインを読み込み、固定させたい要素を指定します。

■CSS

CSSもごく単純な記述にしました。

どうでしょう、記述量も少なくてとてもいいですね！自分で作ろうと思ったら考えることが結構多くて意外と時間がかかると思います。
これならサクッと導入できるのでとても便利です。

配布元に色々と使い方やオプションも書いてあるので是非ご覧ください。

→webwedge

こういった細かいところでユーザビリティの向上を目指していけたらいいですね。

以上、クリエイターズメモでした。