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

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

2015/10/23

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

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

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

Fit Sidebar

fit-sidebar

DEMO DOWNLOAD

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

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

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

html部分を記述します。

<div class="contents">
    <div class="main">

    </div>
    <div class="side">
        <div class="side_contents">

        </div>
    </div>
</div>

</div>

</div>

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

<link rel="stylesheet" href="css/jquery.fit-sidebar.css">

1	<link rel="stylesheet" href="css/jquery.fit-sidebar.css">

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

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fit-sidebar.js"></script>

1 2	<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.fit-sidebar.js"></script>

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

	<script type="text/javascript">
	$(function() {
	    $('.side_contents').fitSidebar({
	        wrapper : '.contents',
	        responsiveWidth : 737
	    });
	});
	</script>