2010年12月10日金曜日

jqueryでフロートメニューを自作する

以前、フロートメニューを作る際に「jquery-scroll-follow」というjqueryのプラグインを使ったことがあったんですが、今回新たに調べてみたところ、最新版のjqueryでは動作しないことがわかりました。

「jquery-scroll-follow」は2008年からバージョンが更新されていません。
フロートメニュー自体あまり人気もないし、今後も更新されなさそうな感じなので、自作してみることにしました。

サンプル:jqueryでフロートメニュー

拍子抜けするくらい簡単でした。

ついでにanimateを使ったバージョンも作成。矢印キーでスクロールするとちょっと動作が怪しいです(汗

サンプル:jqueryでフロートメニュー(animate版)

jqueryの場合、こうした簡単な機能であればライブラリを探すよりも自作してしまったほうが早いというケースも多そうです。

[追記]
animate版のほうを若干修正。要素セレクタに:not(:animated)を加えることで、アニメーション実行中にさらにアニメーションが実行され、動作が不安定になるのを防止するようにしました。

0 件のコメント:

コメントを投稿