Snow-Materia > 仮想-position:fixed

前書き

IEでは position:fixed が使えないので、それを仮想的に実現してみます。

サンプル

• 「仮想-position:fixed」のサンプル

ソースコード

/* position-fixed */
body {
    filter:expression('');
}
#fixed {
    position:fixed;
    _position:absolute;
    z-index:2;
    top: 0;
    left:0;
    _top: expression(
        document.documentElement && document.documentElement.scrollTop  || 
        document.body && body.scrollTop  || 0
        + 0 + 'px'
    );
    _left:expression(
        document.documentElement && document.documentElement.scrollLeft || 
        document.body && body.scrollLeft || 0
        + 0 + 'px'
    );
}

上記は画面の左上に固定。 右下に固定したい場合は下記のようにします。

/* position-fixed */
body {
    filter:expression('');
}
#fixed {
    position:fixed;
    _position:absolute;
    z-index:2;
    top:auto;
    left:auto;
    bottom:0;
    right: 0;
    _bottom:expression(this.style.filter = '', '0');
    _right: expression(this.style.filter = '', '0');
}

備考

左や上を基準に固定するのは、 px値しか使えません。 (scrollTopが整数なので) 右と下を基準に固定するのは、どんな値・単位でも構いません。 スクリプトもやや簡単ですね。

わざわざ this.style.filter = '', こんなことをやってるのは、 プロパティに値を指定しても、 前回と内容が全て一緒の場合は更新・適用されない という仕様があるためです。
(filterは空白でも更新になるみたいですが)

そんなわけで、敢えていれているので、消さないでください。
左基準、上基準のときは値が変わるので、 this.styleを参照するだけで済むみたいです。 まあ、もともと謎仕様なのでよくわかりませんね。(笑)

ここから下は 2004.01.13 の更新分。

this.style がないとき、 expression(document.body.scrollTop + 0 + 'px') はダメなのに、 expression(body.scrollTop + 0 + 'px') は動くみたいなので、そうしました。

ふと思って、 body { filter:expression(''); } これを入れたら、なんとすごくフィットしますね。 (互換モード時だけ…)
前までのこれがなかったとき は、なんか残像が残っててちょっと気持ち悪かったんだけど、 今のだとすごいスムーズで fixed に見えます(笑)