クリエイティブ

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


関連記事

Google Search Consoleでサイト確認ができない場合の対処法

少し前にとある相談を受けた時のトラブルだったんですが、Google Search Console(旧Googleウェブマスターツール)でサイトが認識できないということがあったので、その対処法についての …

デザイナー視点でプログラムについて考えてみる。

最近javascriptやらphpやらを改めて勉強し直しています。大学では電子情報工学を専攻していたので、C言語等は触ったことがあり、基本的なプログラムの概念や考え方は理解していましたが、最近はウェブ …

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

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

最新jQueryでスマホサイトのモーダル「Reveal」を使う

この間軽く引っかかったのでメモ。 最近のスマホサイトで実装することが多いモーダルウィンドウ(メニュー系)で良く使われているjQueryライブラリは「Reveal」だと思いますが、jQueryが1.6頃 …

EC-CUBE 2.12系で商品情報の項目を追加する

ここ最近でEC-CUBEのテーマ編集と若干のカスタマイズをしたのでメモです。自分はデザイン寄りなので、データベースはphpMyAdminの存在は知っている程度、phpやjsは自力では書けない、そんなレ …

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