クリエイティブ

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行目を以下のように書き換えます。

 

 

あと必要なのは、jqueryとjqueryuiですけど、設置するのも面倒なのでgoogleapisを使います。
jqueryの記述はソースをいちいち書くのは面倒なので見てもらうとして、
設置サンプルはこちら

で、注意点ですが、スクロールさせたいエリアは、IDで指定する事と、
そのエリアは更にIDを持つ親要素を持っていないと動作しないのです。

簡単に言うと、スクロールエリアをbody直下に記述したり、
IDの無いdiv配下に記述した場合は、スクロールについていきません。
今日これだけで2時間ハマりました。ファック。

処理的に、id内の指定idに対して有効なようです。
ちなみに、親要素のidは何でも構いません。

サンプルデータが欲しければこちらからどうぞ。zip

-クリエイティブ
-, ,

執筆者:


comment

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

CAPTCHA


関連記事

XAMPPとHosterで本番URLをローカルサイトで実現する

注:イーモバイルなどで常にネットに繋がっている人にはほぼ不要記事です。 注意通りですが、常にオンラインでサーバーにアクセスしたり、 修正やアップロードができる状態の人は、読まない方が良いです。 はっき …

Web(ウェブ)とは何か、を改めて考えてみる。

未確定ですが、今年の秋頃から専門スクールで高校3年生相手にウェブサイト制作に関する授業を受け持つことになるかもしれないので、ウェブに対して無知な人には、ウェブをどう教えれば良いのか、ということを考えて …

考察:MacBook Proの画面解像度が2880×1800ピクセルに?

2012年の第2期に画面解像度が2880×1800ピクセルになったMacBook Proが発売される。 という噂が出てきました。希望的観測が強そうですが、可能性はゼロではないと思います。 現 …

Mac for XAMPPでのローカル開発環境について。独自ドメイン設定も。

8ヶ月ぶりの更新となりました(汗 今年に入ってから先月末まで休みらしい休みも無く、家族を放ったらかしで仕事してたらこうなりました。さて、久しぶりの更新で何を書こうかなと思い、備忘録も兼ねて自分のローカ …

Flashバナー(swf)の容量を減らす方法

ここ最近でFlashのバナー制作を何点かやっているのですが、入稿先のメディアごとにswfの容量制限が結構異なっていて、200〜300KB以上余裕があれば15秒程度のバナーなら全体的に画像で作っても問題 …

Copyright© ブログ|横浜・東京のホームページ・印刷物制作 マジリ , 2018 All Rights Reserved.