こいつ、スクロールしても付いてくるぞ!?「Contained Sticky Scroll」

jquery-plugin

Contained Sticky Scroll

たまにホームページをスクロールしていくとサイドバーのコンテンツが付いてくることがありますね。
ページが長いときとかについてくるとサイドにスペースができず、見た目的にいいときもあるかもしれませんね。（なんか嫌なときもあるけど・・・ケースバイケースで＾＾）

1. HTML(head)
2. html(body)

とりあえずダウンロード

配布先からダウンロードするとして、下記画像の赤で囲ってあるところをクリックします。テキストリンクではないので注意が必要です。デモを見る場合は青色のテキストリンクをクリックします。

実際に設置して動作を確認しよう！

ダウンロードができたらコードを書いてみましょう！！

HTML(head)

[html]
<head>
<script src="jquery.min.js"></script>
<script src="jquery-contained-sticky-scroll.js"></script>
<script>
$(function(){
jQuery(‘#sidebar’).containedStickyScroll();
});
</script>
</head>
[/html]

html(body)

[html]
<div id="sidebar">
ここの中に書いたものがついてくるよ～。
</div>
[/html]
サンプル
初期状態のままでも動くには動くのですが、「もうちょっとはやくついてきてほしい・・・」や「×が邪魔だなぁ・・・」ってことがあると思います。ご心配なく！！これもオプションを書いてあげれば万事解決です！！
先ほどの<head>部分を少し足します。
[html highlight=”6,7,8,9″]
<head>
<script src="jquery.min.js"></script>
<script src="jquery-contained-sticky-scroll.js"></script>
<script>
$(function(){
jQuery(‘#sidebar’).containedStickyScroll({
duration: 150,
closeChar: ”
});
});
</script>
</head>
[/html]

duration: スクロールしてからサイドがついてくる時間。数字が小さいほど速い。
closeChar: 初期状態で「×」ってでてるやつ。非表示にしたい場合は値に何も書かない。
ちなみに×をクリックすると元の位置に戻り、固定されます。

他にもオプションはありますが、使ったことがないですね＾＾；
一応配布先のデモページに書いてあるのでそちらを見てください(_ _)

「Contained Sticky Scroll」でした！！ではっ！！