マジリブログ
つらつら書いてます。
scrollfollowが動かない。最新版jquery用に調整する。
サイドなどでメニュー等をスクロールにあわせて付いてくるようにする、
jaueryを使用した便利なスクリプト、scrollfollowですが、
最新版で使う時は少しカスタマイズが必要なのと、
使用時に注意点があって、今日プチはまりしたのでメモです。
自分で用意するのは、jquery.scrollfollow.jsですね。
本家の元データの配布はこちら
見てもらえればすぐ分かりますが、このjsはjqueryが1.5.2で動作確認されてます。
2012年7月11日現在、jqueryの最新バージョンは1.7.2ですが、
1.7.2だとscrollfollowはそのまま動きません。
で、一部カスタマイズが必要なのですが、58行目と59行目を以下のように書き換えます。
var parentHeight = parseInt( box.cont.outerHeight() ); var boxHeight = parseInt( box.outerHeight() + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );
あと必要なのは、jqueryとjqueryuiですけど、設置するのも面倒なのでgoogleapisを使います。
jqueryの記述はソースをいちいち書くのは面倒なので見てもらうとして、
設置サンプルはこちら
で、注意点ですが、スクロールさせたいエリアは、IDで指定する事と、
そのエリアは更にIDを持つ親要素を持っていないと動作しないのです。
簡単に言うと、スクロールエリアをbody直下に記述したり、
IDの無いdiv配下に記述した場合は、スクロールについていきません。
今日これだけで2時間ハマりました。ファック。
処理的に、id内の指定idに対して有効なようです。
ちなみに、親要素のidは何でも構いません。
サンプルデータが欲しければこちらからどうぞ。zip
