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

/web/html-css

Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。

あんまり綺麗な方法じゃないのだけど、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ではガタついてしまう。

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。

3 Comments

ma wrote:
最近ようやくIE7にしたので、自分のサイトのCSSに
position: fixed;
を使い始めてみたものの、IE6用には
_position: absolute;
を使用していました。

でも、この方法でなんの問題もなく(もともとbody要素の背景画像を固定していました)
IE6でも望むとおりに表示することができました。
ありがとうございます! 2009–01–28 00:05
saba wrote:
どうしてもこの問題を解決したくて色々探していましたがこれが一番シンプルでいいですね。
助かりましたm(__)m 2010–02–26 10:06
sasaki wrote:
この方法で「ページっトップへ」のリンクのように、
表示領域の下部へ、

bottom: expression((documentElement.scrollTop || document.body.scrollBottom) + 0 + 'px');

みたいな指定をすると、うまく動かないのですが、
回避方法はありますでしょうか??
お時間のある時にでも、お返事いただければ幸いです。 2010–03–05 13:29