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

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

jquery-plugin

Contained Sticky Scroll

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

とりあえずダウンロード

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

ContainedStickyScroll

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

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

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」でした!!ではっ!!