スクロールしてもついてくる！のJavaScript「jQuery Scroll Follow」

ページが縦に長くなるとサイドメニューとかが見えなくなってしまいます。
それを防ぐ方法としてabsoluteやfixedするケースがあります。
jQuery Scroll FollowではjQueryを使用し、スムーズについてきます。

使用方法

jQuery Scroll FollowからjQuery、jQuery UI Core、jQuery Easing Plugin、jQuery Cookie Pluginをダウンロードします。
headには以下のように記述します。

<script type="text/javascript" src="http://yourdomain/jquery-1.2.6.js"></script>

<script type="text/javascript" src="http://yourdomain/ui.core.js"></script>

<script type="text/javascript" src="http://yourdomain/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="http://yourdomain/jquery.cookie.js"></script>

<script type="text/javascript" src="http://yourdomain/jquery.scrollfollow.js"></script>

<script type="text/javascript">

$( document ).ready( function (){

	$('#id名').scrollFollow({

	killSwitch: 'id名2'

	});

});

</script>

次にスクロールさせたいコンテンツを以下のように書きます。

<div id="id名">

コンテンツ

</div>

以上で終わりです。
また、killSwitchというオプションを加えることで、ついてこないようにもできます。
その場合は以下を上記内に追記する必要があります。
<a id="id名2">ストップ</a>

サンプル

このボックスがついてきます。

Default Text

上記をクリックすることで、「ついて来ない」「ついて来る」を選択できます。

Javascriptサンプルページ一覧

skuare.net