Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。
あんまり綺麗な方法じゃないのだけど、5分でできる。
(サンプルファイル)
#fixedElement {
position: fixed;
top: 100px;
left: 80px;
/* IE5 later && javascript-on */
position: expression('absolute');
top: expression(documentElement.scrollTop + 100 + 'px');
left: expression(documentElement.scrollLeft + 80 + 'px');
}
note: max-widthとかにも応用できそうね。ただ、ソースごっちゃになるから長めの処理は書かないほうが良いかも。
参照: WebFX, CSS Expression Optimization
追記(2007.12.06)
IE5対応バージョン
#fixedElement {
position: fixed;
top: 100px;
left: 80px;
/* IE5 later && javascript-on */
position: expression('absolute');
top: expression((documentElement.scrollTop || document.body.scrollTop) + 100 + 'px');
left: expression((documentElement.scrollLeft || document.body.scrollLeft) + 80 + 'px');
}
ただし、これだけだとスクロール時にガタつくことがあるので、対策としてbody要素の背景画像を固定する。
body {
background: url(null) fixed;
}
上記のように必ずしも背景画像そのものは必要としないが、もしbody要素の背景画像を固定したくない場合は、html要素に指定することで代用することができる ...が、その場合はIE6のみ有効。IE5ではガタついてしまう。
Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。
3 Comments
position: fixed;
を使い始めてみたものの、IE6用には
_position: absolute;
を使用していました。
でも、この方法でなんの問題もなく(もともとbody要素の背景画像を固定していました)
IE6でも望むとおりに表示することができました。
ありがとうございます! 2009–01–28 00:05
助かりましたm(__)m 2010–02–26 10:06
表示領域の下部へ、
bottom: expression((documentElement.scrollTop || document.body.scrollBottom) + 0 + 'px');
みたいな指定をすると、うまく動かないのですが、
回避方法はありますでしょうか??
お時間のある時にでも、お返事いただければ幸いです。 2010–03–05 13:29