東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

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

2021.01.20 Posted by

tecmemo2101

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

 

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

 

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

 

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

 

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

 

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

 

DEMO

 

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

 

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

 

webwedge

 

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

 

■HTML

 

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

 

■HTML上スクリプト部分

 

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

 

■CSS

 

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

 

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

 

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

 

webwedge

 

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

 

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

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278