[JS]複数のエレメントをスクロールしても指定した場所に留まらせるスクリプト -ハチ公

ハチ公という名のjQueryのプラグインです。
ページ内に配置したエレメント、ヘッダでもナビゲーションでもページ途中のものでも、スクロールしても指定した場所に固定表示するjQueryのプラグインを紹介します。

ハチ公 -GitHub

• ハチ公のデモ
• ハチ公の使い方

ハチ公のデモ

留まらせるエレメントは、通常通りに実装したもので構いません。デモでは2つのエレメントを留まらせます。

デモページ

ブルーグレーのバーに注目です。
ここにハチ公が仕込まれており、スクロールしてもバーは上部に固定表示されます。

デモページ：少しだけ下にスクロール

更にページの一番下までスクロールすると、もう一つのハチ公が下部に固定されています。

デモページ：一番下までスクロール

ハチ公は留まるのを止めることもできます。
「Hachi, free!」ボタンをクリックするといなくなります。

デモページ：一番下までスクロール

「Hachi, stay!」ボタンをクリックすると、復活します。

ハチ公の使い方

実装は非常に簡単で、複数の要素にハチ公を適用することもできます。

Step 1: 外部ファイル

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.hachiko.1.0.0.min.js"></script>

Step 2: HTML

HTMLは通常通りに実装し、ハチ公を適用するエレメントがスクリプトで指定できるようにidなどを付与します。
例：id=sticky

<div id="sticky">Click me to see how the state is preserved when stickied</div>

Step 3: JavaScript

ハチ公を適用するエレメントをjQueryのセレクタで指定し、スクリプトを実行します。

<script type="text/javascript">
	$(function() {
		$("#sticky").hachiko({top: 0});
	});	
</script>

複数の要素に指定する時は、下記のようになります。

<script type="text/javascript">
	$(function() {
		$("#sticky").hachiko({top: 0});
		$("#logo").hachiko({bottom: 0, right: 0});
	});	
</script>

オプション

オプションで表示位置を上左右下から指定できます。

top

上からの表示位置

left

左からの表示位置

right

右からの表示位置

右からの指定をしたら、優先される

bottom

下からの表示位置

parent

ハチ公を適用する要素の親エレメント

指定無しの場合は、body