今日もやってしまいました。
私は、何度も何度も同じ間違いを繰り返し、
「あーそうだったよ、そうだった。前にも同じことで、つまづいたんだった」
ということがよくあります。
もー絶対に、同じ過ちを繰り返さないぞ！
という強い意志を持って、今回の記事をお送りします。
スクロールが長いページのときに、
グローバルメニューを上部に固定しておきたいときってありますよね。
最初から一番上に配置しておくだけなら、position:fixed;で構わないんですが
ヘッダー上部にはロゴがあって、その下にグローバルメニューって場合が普通だと思います。
その場合には、ちょっと工夫が必要で今回jQueryを使ったんですが、 どうにもこうにも動かない。
あれやこれやとソースとにらめっこすること小１時間・・・
lightboxのjsを全部外すと、動きました。 どうやら、prototype.jsとぶつかっている事が判明。
prototype.jsとjQueryは衝突しやすい
そうなんです！
このことを忘れてましたーーー！
前にも同じことで半日悩んだことがあったのに！バカバカバカ。
作業していたのは、ある会社の制作実績が大量に掲載されているページでして、 それぞれの実績の中身をモーダルウインドウ（背景がグレーになってパッと浮き出てくるアレね）で見せていたのです。
なぜprototypeとjQueryが衝突するのか？っていうのは、
簡単に言うと[$]関数をprototypeとjQueryの両方で使ってしまっているから、
どっちの命令なのかわけわからなくなり、結果動作しなくなっちゃうらしいです。
回避方法
(1) まず、読み込む順番が重要です。
head内で読み込むときは、prototypeが先、jQueryは後に書きましょう。
(2) そしてjQueryに書いてある「$」を、ぜんぶ「jQuery」に書き換えます。
$(function(){
});
↓ ↓ ↓
jQuery(function(){
});
こーいうことね。
ファイル内に$は、いっぱいあると思いますが、エディタの一括置換を使いましょう！！
まだ動かないですか？そんな場合は、
(2) noConflictを使います。
これでモーダルウインドウも、固定メニューも、両方とも無事実装できたと思います。
めでたしめでたし。
ーーーーーーーーーーーーーーーーーーーーーしかし本当にもの覚えが悪いよ、自分・・・。
せっかくzen-cording入れたのにショートカットをなかなか覚えられないし、
作業効率もなんか落ちてるし、やっぱ年のせいかしら。
