CSSの”position:fixed;”は、要素をウインドウ内の相対位置に固定するもので、スクロールしても場所が変わらない要素を配置するのに便利です。ですが、残念ながら未だに人気ブラウザランキングのトップにいるInternet Explorer 6.0はこのCSSをサポートしていません。
そこで、IEの場合のみIE独自のsetExpressionというプロパティを使って、fixedもどきを実装します。スクロールすると少しちらつきますが、当面の目的は果たせるかと思います。
【サンプル】
(function(node) {
node.style.left = "10px";
node.style.top = "10px";
if (typeof(node.style.setExpression) == 'function') {
node.style.position = "absolute";
node.dy = node.offsetTop;
node.dx = node.offsetLeft;
node.style.setExpression('top', 'y=(document.documentElement.scrollTop+this.dy)+"px"');
node.style.setExpression('left', 'x=(document.documentElement.scrollLeft+this.dx)+"px"');
} else {
node.style.position = "fixed";
}
})($('rectangle'));
【サンプルの実行】 → クリックすると、下の矩形領域が画面左上に固定されます。
