大輔べ

登山・写真・チェンマイ・台湾が好きな「たしろだいすけ」のブログ

スクロールに付いてくるメニューを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 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の動作サンプル