IEで「position:fixed;」を使う方法

2007–03–15

あんまり綺麗な方法じゃないのだけど、5分でできる。
（サンプルファイル）

1. #fixedElement {
2. position: fixed;
3. top: 100px;
4. left: 80px;
5.  
6. /* IE5 later && javascript-on */
7. position: expression('absolute');
8. top: expression(documentElement.scrollTop + 100 + 'px');
9. left: expression(documentElement.scrollLeft + 80 + 'px');
10. }

note: max-widthとかにも応用できそうね。ただ、ソースごっちゃになるから長めの処理は書かないほうが良いかも。

参照: WebFX, CSS Expression Optimization

追記(2007.12.06)

IE5対応バージョン

1. #fixedElement {
2. position: fixed;
3. top: 100px;
4. left: 80px;
5.  
6. /* IE5 later && javascript-on */
7. position: expression('absolute');
8. top: expression((documentElement.scrollTop || document.body.scrollTop) + 100 + 'px');
9. left: expression((documentElement.scrollLeft || document.body.scrollLeft) + 80 + 'px');
10. }

ただし、これだけだとスクロール時にガタつくことがあるので、対策としてbody要素の背景画像を固定する。

1. body {
2. background: url(null) fixed;
3. }

上記のように必ずしも背景画像そのものは必要としないが、もしbody要素の背景画像を固定したくない場合は、html要素に指定することで代用することができる ...が、その場合はIE6のみ有効。IE5ではガタついてしまう。

Posted in /web/html-css
ブックマークする: