IE6で position:fixed エミュレーション

javascript css

どうやら IE7 の標準モードでは、position:fixed （スクロールの如何にかかわらず、画面の一定の位置に表示される) がようやく実装されたらしい。が、まだまだ世の中たくさんある IE6 では、それがない。

方法はないのか、といえばある。一番まとまっているのは下のエントリ。

IEで固定座標を指定する方法

IE 独自機能である expression というのを使っているのが興味深い。以下は引用。

<!--[if lt IE 7]> 
<style type="text/css">
 #fixed {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop+50));
  left: 100px;
 }
</style>
<![endif]-->

eval というキーワードからわかるように、これは CSS のプロパティに Javascript の動的な世界を持ち込もうという野心的な試みらしい。これは、素直に Microsoft を評価すべきではないか。現在の CSS ファイルの問題点は、それがあまりに静的すぎて、表現力が乏しいことだ。もちろん、これは W3C の標準ではないものの、これに類似した機能が標準に盛り込まれると便利だな。

Javascript からは、次のように使用できる。

// element には DOM Element オブジェクトが入っている。
element.style.setExpression("top", "document.documentElement.scrollTop + 50");

こうしておくと、IE がこの要素の top プロパティを必要とするたびに、"document.documentElement.scrollTop + 50" という式がグローバルスコープで評価される(らしい)。なんとも面白い。詳しくは以下のエントリを。

DHTML Dude: さらにダイナミックに

おどろいたことに、この記事は約10年前の 1998 年 6月 に書かれている。これは IE5 向けの機能であったらしい。しかし、あまり流行らなかったんだなあ。

ところで、position:fixed エミュレーションの話の戻ると、ここまでの議論は、話の半分にすぎない。expression で、表示域上の位置を固定しても、このままではスクロールしたとき、ガタガタ描画されて気持ちが悪い。これを避けるためには、次のようにする。

 body {
  background: url(null) fixed;
 }

ポイントは BODY 要素の background-attachment を "fixed" にすることだ。つまり画面の背景画を固定表示にするということ。上では url(null) とわざわざ null を設定しているのは、そうしないと fixed が有効にならないからだ。もちろん有効な画像を設定してもよい。

IE6 はまったくの困ったちゃんではあるが、たいてい何らかの回避策も存在するというのが面白い。（世のデザイナ・プログラマの血と汗で作られたバッド・ノウハウではあるけれども）