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

このエントリーを含むはてなブックマーク はてなブックマークを見る｜ この記事をクリップ！ コメントを見る ｜Yahoo!ブックマークに登録 ｜ このエントリーをdel.icio.usに追加する deliciousブックマーク数 ｜このページを行き先登録 ｜このページをniftyクリップに登録 ｜このページをBuzzurlに登録

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

使用方法 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>
スクロールしてもついてくる！のJavaScript「jQuery Scroll Follow」サンプル

2008年09月01日

前の記事：jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
次の記事：レイヤー表示（？）JavaScript「jParallax」

関連記事

過去の記事

rss

ページトップに戻る