IE6でposition fixedを利用する方法 fixed.js & jQueryプラグインexFixed.js

毎年大阪で開催しているクリエイターイベントが11/4(月・祝)に開催!(※僕も登壇します!)
クリエイター200人祭り2019大阪 3年後の可能性を立証せよ!怪盗Wの挑戦状

珍しくFlashネタです^^

つい最近Flashのフローティングブログパーツを作る機会があったのですが、

スクロールしても画面に固定されるposition:fixedがIE6に対応してないことを知って

対応させるために調べたものを共有します。

■状況

ブログパーツといってもサイト内で利用するキャンペーン用のブログパーツでした。

サイトにアクセスすると自動的に画面に出現し、動きまわるという要求でした。

■実装にあたって利用した物

昔Flashのフローティングブログパーツを作った際は1からすべてJavaScriptを組み、

ちょこちょこブラウザ対応とか検証とか大変だったのですが、今はカヤックさんが公開している

ブログパーツフレームワーク 「suzunari」というのがあったので利用させていただきました。

Blogparts Framework suzunari

http://coderepos.org/share/wiki/suzunari

こちらのフレームワークを利用することでFlashの開発に専念できます。素晴らしい!

詳しくはリンク先を見て頂ければいいですが、jQuery、swfobject内蔵し、画面ジャックや本文解析等

最低限+αの機能が用意されています。

■困ったこと

さくさくと作って十分動いたので安心してましたが

ま た IE6 が や っ て く れ ま す

まぁこれは僕が知らなかったというのもあるんですが、

IE6はposition:fixed が対応してなかったんですね。

どういう風になったかというと、fixedに対応してなかったので、

画面の一番下に1画面分のものが追加された状態になってしまいました。

このままではIE6の人はこのブログパーツに気づかないwww

■調べた結果

どうすればいいのかと検索してみたらいいものがありました。

doxdesk fixed.js

http://www.doxdesk.com/software/js/fixed.html

※本文最下部の「module」というリンクからダウンロードできます。

なんとこのjsファイルを読み込むだけでposition:fixedがIE6対応されるというではありませんか!!

さっそく読み込ませてみると無事IE6で表示されるようになりました! すげー!

■これで終わりではなかった

やったー終わったー!と思っていたらIE8でJavaScriptのエラーが起こるではありませんか。

fixed.js内のある一部分がIE8でエラーがでることが分かりました。

IE7やIE8で問題無かったのですが、このfixed.jsはどうやらIE8でも実行されていたようでした。

そのためIE6だけで実行されるようにしようと以下の対応を行いました。

JavaScript による、IE 6/IE 7 の判別/判定について。

http://queensryche.blog41.fc2.com/blog-entry-588.html

こちらを参考にdocument.body.style.maxHeightが取れない場合(=IE6)はfixed.jsの中身を実行するようにしました。

if (typeof document.body.style.maxHeight == “undefined”){

(fixied.jsの処理)

}

よし、これでIE8でエラーがでなくなった!

・・・と思ったら今度はFirefoxでエラーがでてました。

document.body not found….

おお、Firefoxでは取得できないのねw

ということでさらにその上に

if(document.body){

(IE6だけfixed.jsが実行される処理)

}

という形でくくってあげました。これでなんとかIE6~8、Firefox、Chrome、Mac版Safariで

エラーもなく問題なく表示されるようになったので完了って感じでした。

ちょっと場当たり的な対応になってしまったけど、同じような問題が発生した人のために共有と思い記事にしてみました。

2011/05/16追記

別で似たような機会があった際に分かったのですが、jQueryを読み込む前は上述のIE8などのエラーがでませんでした。

なので上記のような状況になった際は先にfixed.jsを読み込むと問題がなくなるかもしれません。

※ただし、jQueryとどのような形で不具合がでるかは確認が必要。

■もしブログパーツとかではなく、IE6でposition:fixedに対応させたい場合

の場合はこういうのがあります!

世の中みんなjQuery様が解決してくれますね!

suzunariにもjqueryが内蔵されてますが、こちらのプラグインときちんと互換取れてるか

検証は避けたかったのでそのままfixed.jsを利用した感じです。

IE6 position:fixed の諸問題を解決するjQueryプラグイン – exFixed.js

http://d.hatena.ne.jp/cyokodog/20090323/jQueryExFixed

以上ご参考までに^^

毎年大阪で開催しているクリエイターイベントが11/4(月・祝)に開催!(※僕も登壇します!)
クリエイター200人祭り2019大阪 3年後の可能性を立証せよ!怪盗Wの挑戦状

この記事を書いた人

カッシー(樫本祐輝)

カッシー(樫本祐輝)

株式会社クリエイティブユニバース代表取締役。
クリエイターはもっと幸せになってもいいんだ!と「クリエイティブな人に幸せを」を理念に活動。

2017年に法人化。現在は事業戦略クリエイティブ・プロデューサーとしてコンサルや、クリエイター・フリーランスギルド「TheCreative」を主宰。大阪東京合わせて80人を超える。フリーランスカレッジ、クリエイター200人祭りなど主催。

twitterにて「#カッシーのフリーランス講座」というハッシュタグでフリーランス向けのノウハウ・お役立ち情報発信してます。クリエイター・フリーランス支援の独自の統計をもっていることを強みに発信しています。イベント・セミナー情報もTwitterが一番早いのでぜひフォローください!

クリエイターで独立・副業を目指す人へ

長年のフリーランス支援の知識を元にフリーランス向けのメディア「次世代フリーランス研究所(通称フリラボ)」を立ち上げました。