jQueryで常に所定の場所にサイドカラムを表示させるプラグイン「Contained Sticky Scroll」

よくサイトの右上に必ずついてくる情報ボックスやメニューがあります。
邪魔という意見もありますが、必要な情報にすぐにリーチ出来るのならあってもいいのではないでしょうか。
これをjQueryプラグインのContained Sticky Scrollで実現しましょう。

sponsors

使用方法

Contained Sticky Scrollからjquery-contained-sticky-scroll.jsをjqueryからjquery.jsをダウンロードします。

<script src="/test/js/jquery-1.4.4.min.js" type="text/javascript"></script>	
<script src="/test/js/jquery-contained-sticky-scroll.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	$('#id名').containedStickyScroll({
		duration: 300, //速度
        	unstick: true, //追跡モードなし
        	closeChar: '付いてくんな!'  //追跡止めるボタンテキスト
	});
});
</script>
あとは上記idを付与すれば完成です。
なお、下記のようなhtmlを記述します。

<div style="float:left;">
メインコンテンツエリア
</div>
<div id="id名" style="float:left;">
サイドカラム部分
</div>
<!-- clear:both;を記述 -->

Javascriptサンプルページ一覧
skuare.net

sponsors