レスポンシブ対応のサイドバーを固定してスクロールに追従するjQueryプラグイン「Fit Sidebar」!

2015/10/23

こんにちは。
今回はレスポンシブ対応のサイドバーを固定してスクロールに追従するjQueryプラグイン「Fit Sidebar」!です。

サイドバーを固定してスクロールに追従するjQueryプラグイン「Fit Sidebar」を使ってみたので紹介したいと思います。
ウィンドウの高さに合わせて固定するサイドバーの高さが変化したり、レスポンシブにも対応しています。
また、上部へスクロールすると位置固定が解除されず、サイドバーの上部のコンテンツになかなかたどり着けないという事もありません。

レスポンシブ対応のサイドバーを固定してスクロールに追従するjQueryプラグイン「Fit Sidebar」!

Fit Sidebar

fit-sidebar

 

jQueryプラグイン「Fit Sidebar」をダウンロード

https://github.com/cyokodog/jquery.sitekitにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

jQueryプラグイン「Fit Sidebar」の使い方

html部分を記述します。

 

head内にjquery.fit-sidebar.cssを読み込みます。

 

jQuery本体とjquery.fit-sidebar.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。
「wrapper」には.mainと.sideを包括する要素を記述します。
「responsiveWidth」は固定を解除する画面幅を指定します。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。サイドバーを固定してスクロールに追従させたい場合は使ってみてはどうでしょうか。
以上でレスポンシブ対応のサイドバーを固定してスクロールに追従するjQueryプラグイン「Fit Sidebar」!でした。

Related Post

topへ戻る