スクロールに付いてくるメニューをjQuery Scroll Followを使って設置した

マルチカラムサイト作成時に、メインの要素がとても長く、サブエリアに設置したメニューが固定ではまったく使えなかったときに使ったのが、今回紹介する「jQuery Scroll Follow」。

参考サイト Open Source – Scroll Follow – The Kitchen @ Net Perspective

いろいろと調べると、テストされたjQueryのバージョンは1.2.6で、新しいバージョンでは動かないとの情報もちらちらありましたが、今回作ったサイトは一時的なものだったので、気にせず使うことにしました。

ちなみに、新しいバージョンで動かす方法もあるようです。今回は使っていませんが、参考までに。

参考サイト SE奮闘記: jquery-scroll-followがjQuery 1.6で動かない
参考サイト jquery.scrollfollow.jsをver1.7.1のjQueryで動かすには « NLOG

jQuery Scroll Followの使い方

まずは、必要なファイルをダウンロード。

• jQuery 1.2.6 (Minified)
• jQuery UI 1.5.2
• Scroll Follow

jQuery Easing PluginとjQuery Cookie Pluginは今回は使用しません。

続いて、設置。

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="jquery.scrollfollow.js"></script>

そして、スクロールさせたい要素（今回は#side）を指定します。

<script type="text/javascript">
  $( document ).ready( function () {
    $( '#side' ).scrollFollow();
  });
</script>

あとは#sideにcssで、position: relative;を指定。

#side {
  position: relative;>
}

その他いろいろな設定も出来るようなので、ぜひ試してみてください。

jQuery Scroll Followの動作サンプル