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

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

使用方法
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;を記述 -->

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

sponsors

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

記事作成:
記事URL:

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