[JS]複数の指定した範囲ごとにスクロールに追従するパネルを設置するスクリプト -jQuery Stick ‘em

ページ内の複数の指定した範囲ごとに、スクロールに追従するパネルを設置するjQueryのプラグインを紹介します。

jQuery Stick ‘em
jQuery Stick ‘em -GitHub

• スクリプトのアイデア
• jQuery Stick ‘emのデモ
• jQuery Stick ‘emの使い方

スクリプトのアイデア

アイデアとなったのは、下記のサイトです。

World Wildlife | Fund Work | Viget

左に長い画像、右にそれを説明するテキストがあります。通常、画像の下までスクロールしてしまうと、テキストを読むために上にスクロールをすることになります。
しかし、このサイトでは画像の下までスクロールした際、テキストがスクロールに追従して移動します。

スクロールに追従するコンテンツは複数設置する可能性があるので、当然このスクリプトもそのようになっています。

jQuery Stick ‘emのデモ

デモでは、左に長いコンテンツがあり、右のグレーのパネルが指定した範囲内のみスクロールに追従します。

デモページ

1, 3番目は左が長いので追従し、2番目は左が短いので追従しません。

追従の様子

jQuery Stick ‘emの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="jquery.js"></script>
<script src="jquery.stickem.js"></script>

Step 2: HTML

スクロールするdiv要素は「div.stickem」、スクロール範囲となるdiv要素は「div.stickem-container」で実装します。
各class名はオプションで変更可能です。

<div class="container">
	<div class="row stickem-container">
		<div class="content">コンテンツ</div>
		<div class="aside stickem">サイドバー</div>
	</div>
</div>

Step 3: CSS

スタイルシートを下記のようにセットします。

.stickem-container {
	position: relative;
}

.stickit {
	margin-left: 660px;
	position: fixed;
	top: 0;
}

.stickit-end {
	bottom: 40px;
	position: absolute;
	right: 0;
}

Step 4: JavaScript

スクロール範囲のラッパーとなるdiv要素をjQueryのセレクタで指定し、スクリプトを実行します。

<script>
	$(document).ready(function() {
		$('.container').stickem();
	});
</script>

スクリプトのオプション

オプションではclass名の変更、追従する要素の位置調整などを設定できます。

item (default: '.stickem')

スクロールするdiv要素などのclass名。

container (default: '.stickem-container')

スクロール範囲となるdiv要素などのclass名。

stickClass (default: 'stickit')

スクロールする要素の始めの状態。

endStickClass (default: 'stickit-end')

スクロールする要素の終わりの状態。

offset (default: 0)

固定配置のヘッダがある場合などに使用するオフセットの値。

start (default: 0)

スクロールする要素がトップではない場合に開始する位置。