IE6 で、position:fixed メソッド、CSS 式、および JavaScript eval をサポートするようにします Explain_html/css_WEB-ITnose

天井効果や固定効果を作る場合、position:fixedを使うのが一番便利ですが、邪悪なIE6には属性値が固定されておらず、IE6をブラウザ上で固定のように特定の位置に固定させたいのですが、 onscroll を使用して上部の値を変更するのも 1 つの方法ですが、スクロール ホイールの回転が速すぎると、カードのちらつきが発生します。高度なブラウザでもこの方法を使用する場合、ブラウザのバージョンが JS で決定されない限り、明らかに洗練されていません。ただし、ここで説明したいのは、CSS を使用して固定効果を実現することです。
何千もの単語は 1 つの例ほど良くありません:

上記は、IETester で IE6 をテストするための著者の修正です。スクロール バーに注意してください。ナビゲーションはposition:fixedを使用します。
コアコードは以下の通りです:

1 .nav {    /* nav为导航栏 */2     position:fixed;3     _position: absolute;4     top:0;5     _top:expression(eval(documentElement.scrollTop));6     background: #FAA;7 }

ハック技術が使用されており、下線で表される属性はIE6以下でのみ認識されます。 (IE6以下のみ固定をサポートしていないため特殊な処理)
上記の効果はIE6でも固定効果を実現できます。 _top:expression(eval(documentElement.scrollTop)); を理解するのは簡単ではありません。expression と eval の意味と使用法を理解する必要があります。これについては後で説明します。

Expression は IE の固有の属性で、IE5 以降をサポートし、CSS で JavaScript コードを記述するために使用されます。つまり、expression のかっこが JavaScript コードの一部になる可能性があります。

eval は、文字列内容のステートメントまたは式を実行し、その結果を返すことを意味します。

使用法: eval(codes);

パラメータ:

codes -- 文字列形式の式またはステートメント

戻り値:

パラメータがない場合は、未定義を返します

戻り値がある場合は、これvalue が返されます。それ以外の場合は、未定義を返します

式の場合は、式の値を返します

ステートメントの場合は、ステートメントの値を返します

複数のステートメントまたは式の場合は、次の値を返します

最後のステートメント

Expression と eval を理解した後、_top:expression(eval(documentElement.scrollTop)); 理解するのは難しくありません。 documentElement.scrollTopはIE上のスクロールバーの位置を取得するもので、先頭の値はスクロールバーの上からの位置に相当します。 scrollTop 値が変更されると、それに応じて _top も変更されます。
そして、なぜ eval を使用するのでしょうか? documentElement.scrollTop は実際にはステートメントであり戻り値がないため、これは何も操作を行わずに JS で a=1 を実行するのと同じです。 documentElement.scrollTop 値を取得したい場合は、それを返す必要があり、使用する必要があるのは eval だけです。
このように、すべてのブラウザで固定効果を得ることができますが、IE6 でマウス ホイールをスクロールすると、依然としてちらつきが発生することがわかります。これは、スクロール バーをスクロールしたり、ブラウザのサイズを変更したりすると、IE6 がおかしいためです。レンダリング エンジンはすべてをリセットしてページを再描画するため、振動やちらつきの問題が発生する可能性があります。 html または body に追加された backgroune-attachment:fixed; を使用すると、CSS は再描画前に処理されるため、つまり、以前の変更のみとは異なり、再描画前に式が変更されるため、ページが再描画される前に CSS が強制的に読み込まれます。塗装後。こうすることで、マウスがスクロールするときにちらつきがなくなります。これで固定効果は完全に達成されます。コードは次のとおりです:

body { _background: url(about:blank) fixed}

概要:
fixed は IE6 では実装できないため、fixed をシミュレートするためにAbsolute が使用されるため、JS を使用する必要があります。 IE6専用の処理では、IE独自の表現によりCSS内にJavaScriptを記述することで、リアルタイムに先頭の値を変更して固定効果をシミュレートすることができます。ただし、IE6 はブラウザーをスクロールしたりサイズ変更したりするときに CSS を再ロードするため、ページを再レンダリングする前に本文で background-attachment:fixed を使用して CSS をロードします。

コード:

 1 body {_background: url(about:blank) fixed} 2  3 .nav { 4  5     position: fixed; 6  7     _position: absolute; 8  9     top: 0;10 11     _top: expression(eval(documentElement.scrollTop));    12 13     // top值为想要固定定位的位置，设置left同理，设置right与bottom需要通过scrollLeft及scrollTop进行计算，如下注释14 15     // 固定左：_left:expression(eval(documentElement.scrollLeft));16 17     // 固定右：_left:expression(eval(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth));18 19     // 固定下：_top:expression(eval(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight));20 21 }

上記は、IE6 での固定メソッドに対する完璧な解決策です。ご質問やご不明な点がございましたら、メッセージを残してください。

🎜