以下のような感じのコードになります。
<!--[if lt IE 7]>
<style type="text/css">
div#header{
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
left:0px; width:40px;text-align:center;
}
</style>
<![endif]-->
<div id="header">
</div>
の部分をスクロールしても常に同じ位置に表示されるようにします。フレームの代わりに使用したりします。
まずIE6以前の場合にのみ適用されるように以下を記述します。
<!--[if lt IE 7]>
<![endif]-->
そしてposition:fixed;の代わりに
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
を使用します。
これの肝はIE独自拡張のexpressionです。これは動的にCSSをJavaScriptで設定するものです。私は普段使うことはないのですがIE6でだけ駄目ということであればこの方法が手っ取り早いのでこの方法
position:absolute;で絶対位置表示を指定し、top:に動的に座標を指定します。この場合scrollTopがスクロール量を表しています。
これだけですと、スクロール時に固定している部分がちょっと動いては一番上に戻るのでロゴ部分がカクカクと動いてしまいます。
これはbodyのスタイルにbackground: url(null) fixed #ffffff;を指定することで回避できました。なぜこうすると回避できるのかはいまいちわかりません。
そういえばフレームは結局どうなってしまったんでしょうか？ 結構な嫌われものになってしまったようで最近では見かけることはありませんが、同じメニューをページを移動するたびに表示するのは無駄なのでトラフィックの節約になるのでデメリットばかりでもない気がするんですけどね。
