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


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

とりあえずダウンロード

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

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

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

HTML(head)

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

html(body)

<div id="sidebar">
  ここの中に書いたものがついてくるよ~。
</div>
サンプル
初期状態のままでも動くには動くのですが、「もうちょっとはやくついてきてほしい・・・」や「×が邪魔だなぁ・・・」ってことがあると思います。ご心配なく!!これもオプションを書いてあげれば万事解決です!!
先ほどの<head>部分を少し足します。
<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>
duration
スクロールしてからサイドがついてくる時間。数字が小さいほど速い。
closeChar
初期状態で「×」ってでてるやつ。非表示にしたい場合は値に何も書かない。
ちなみに×をクリックすると元の位置に戻り、固定されます。
他にもオプションはありますが、使ったことがないですね^^;
一応配布先のデモページに書いてあるのでそちらを見てください(_ _)

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です