Hatena::ブログ(Diary)

Cyokodog :: Diary

こちらのブログは更新を停止しております。最新の記事は以下ブログをご覧ください。
www.cyokodog.net

September 02, 2009

IE6 でガタつかない positoin:fixed をさせるための詳細条件を調べてみた

IE6 position:fixed の諸問題を解決する jQuery.exFixed.js」について、たくさんのコメント、フィードバックありがとうございます。

exFixed のうりとして「IE6 でもガタつかない position:fixed ができる」というのがありますが、フィードバックでいただいたバグを解消する際に、ガタつき防止の前提条件をいろいろと調べたので忘れないようメモしときます。

固定位置に表示させる処理

まず固定位置表示処理のおさらいから。

IE 固有機能の expression を使います。expression は CSS 定義内でも記述することができますが、JavaScript 内で記述する場合は以下のように書きます。コードは jQuery ベースです。

//位置調整ができるように position:absolute にします
var el = $('#fixedElement').css('position','absolute')[0];

//expression でページスクロール量を加算します
el.style.setExpression(
    'top',
    'eval(100+(document.body.scrollTop||document.documentElement.scrollTop))'
);
el.style.setExpression(
    'left',
    'eval(100+(document.body.scrollLeft||document.documentElement.scrollLeft))'
);

Demo (IE6 Only)

例ではブラウザの表示領域左上から (100px,100px) の位置に固定表示されます。

ちなみに IE8 からは expression は廃止されています。なのでクロスブラウザを意識する場合は、IE6IE7/8 の互換モードの場合のみこれらの処理を適用するようにします。

if($j.browser.msie && ($j.browser.version < 7.0 || !$j.boxModel)){
    IE6 向けの処理
}

位置調整自体は expression を使用しなくても可能ですが、後述するガタつき防止処置を適用するには expression の使用が前提になります。

スクロール時のガタつきを防止する

上記の処理だけだとスクロール時に対象要素がガタついて表示されます。これを防ぐために以下の処理を追加します。

$('html').css({
    'background-image':'url(null)',
    'background-attachment':'fixed'
});

Demo (IE6 Only)

これでガタつかない position:fixed が実現できます。

html 要素に背景画像が割当てられてる場合は 'background-image':'url(null)' は不要です。ただ、'background-attachment':'fixed' のせいで背景画像も固定表示されてしまうので、これを避けるためには body 要素に背景画像を割り当てる等の工夫が必要です。

上記の例は、標準モードで試したのですが、サンプルの HTML の場合だと 'background-attachment':'fixed' の記述がなくてもガタつかない position:fixed が実現できます。また、background 関連の設定をする要素を body にしてもうまくいきます。(但しこの場合は'background-attachment':'fixed'は省略できない。)

調べたところ html , body 要素の background-color , background-image の設定の有無、標準/互換モードの条件の組み合わせによって、'background-attachment':'fixed' が必須か否かが決まるようです。

ガタつき防止 fixed 条件の組み合わせ

標準、互換の両モードでガタつかない組み合わせ条件を調べてみました。

'background-attachment':'fixed'の記述あり

f:id:cyokodog:20090903011152p:image

'background-attachment':'fixed'の記述なし

f:id:cyokodog:20090903011153p:image

意外だったのは、

です。

exFixed などの汎用ライブラリに頼らずにガタつかない position:fixed をさせたい場合は上記の表が参考になるかと思います。

exFixed の処理仕様の変更

今回の調査で exFixed の処理仕様を変更する必要がでてきました。標準/互換モードに関わらず html 要素に対し下記 background の設定を行うようにします。

なので 背景画像を固定表示させたくない場合は body 要素に背景画像を設定するようにしてください。また、互換モードの場合は、body 要素に背景画像を設定しても固定表示されてしまうので、これを避けるためには標準モードを使用するようにしてください。

ちなみに長ったらしい DOCTYPE 宣言を記述しなくても、下記のような HTML5 ベースな記述で標準モードにすることができます。

DOCTYPE 宣言は <!DOCTYPE html> となります。HTML 構文では、大文字と小文字を区別しません。以前の HTMLSGML であり、DTD を参照する必要があったため DOCTYPE は長くなっていました。しかし、HTML 5 では異なり、DOCTYPE は HTML 構文において標準モードを有効にする手段としてのみ必要となっています。なお、ブラウザーは現段階において既に、<!DOCTYPE html>: を標準モードのトリガーとして解釈しています。

http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff

最新の jQuery.exFixed.js

こちらからどうぞ。

Demo

MIYAMIYA 2009/09/03 18:31 cyokodogさん!

全部の検証やまとめるの大変だったと思いますが凄く為になる情報です。

お疲れ様でしたとありがとうございます!って事でコメントさせて頂きます^^

cyokodogcyokodog 2009/09/04 00:30 いえいえ、これも MIYAさんの記事で、ガタつかない position:fixed の方法を教えていただけたおかげです。
今後ともよろしくおねがいします。

nori_17nori_17 2009/09/24 12:52 素晴らしいまとめでとても参考になりました!ありがとうございます!

cyokodogcyokodog 2009/09/25 01:17 IE6 撲滅の風潮が強いのであまり需要無いかなと思ってましたが、お役に立てて幸いです。
nori さんのブログ(http://moto-mono.net/)、いつも楽しみにさせていただいてます。
今後ともよろしくお願いします。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証