ホームページ  >  記事  >  ウェブフロントエンド  >  IE6のfixed_javascriptスキルに最適なソリューション

IE6のfixed_javascriptスキルに最適なソリューション

WBOY
WBOYオリジナル
2016-05-16 18:08:531327ブラウズ
最初の方法: 純粋な CSS
現在、インターネット上には多くのソリューション (純粋な CSS) があります:
コードをコピー コードは次のとおりです:

html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position: Absolute;right:30px;top50px;}

このメソッドには未解決のバグがあります。IE6 では、すべてのposition:absolute が「浮動」要素に変換されます。js オブジェクトも使用されます。スクロールバーをスクロールするとちらつきます。 以下の方法ではCSSとjsを組み合わせて上記の問題を解決します。
コードをコピー コードは次のとおりです:

.org/1999/xhtml"> ;head>
















style type="text/css">
*
{
マージン: 0px;
パディング: 0px;
body {
_background-image: url( about:blank); /*ブラウザの空白ページを背景として使用します*/
_background-attachment: fixed; /* スクロール バーがスクロールされるようにするため、要素は点滅しません*/
}
#topNav {
width: 980px;
z-index: 100; /*フローティング レベルを設定します*/
位置: 固定; : 50px; /* 他のブラウザでの位置設定の場合は、ここで座標を設定できます*/
_position:Absolute; /*IE6 は固定をシミュレートするために絶対を使用します*/
_top:expression(documentElement .scrollTop 50 "px") ; /*IE6 は上部の位置を動的に設定します*/
/* documentElement.scrollTop はフローティング要素を常にブラウザの上部に設定します 値を追加して植字効果を実現できます*/
background-color :#0000FF;
高さ: 31px;
}
.show{
上:500px;
ボーダー:#ff0000ソリッド;
}




gt;









br />gt;

gt;
gt;

gt;


gt;



gt;














gt;
gt;
gt;



gt;
gt;
gt;
gt;



gt;
gt;
gt;
gt;
gt;
gt;
gt;
;

gt;

gt;
gt;




gt;
gt;





gt;

gt;

br />

br />gt;




gt;

;br />gt;

show
垂直方向の固定のみ実装されています。水平方向の固定を実現するには、_left:expression(documentElement.scrollLeft "px");
スクロール時にスクロール バーがちらつくのを防ぐために、
を設定します。背景がスクロールして競合が発生する場合は、次のようなコードを HTML セレクターに記述できます。 コードは次のとおりです。以下のように:


html {
_background-image: url(about:blank);
_background-attachment: 修正済み; /* IE6 での画面のフラッシュを防止します */
}
body {
background-image: url(1.jpg);
background-attachment: スクロール;
}


2 番目のメソッド JavaScript
コードは次のとおりです:


.org/1999/xhtml"> ;head>



🎜>

テスト内容....


テスト内容....

< p>テスト内容......


テスト内容......


......


テスト内容....


テスト内容......


テスト内容....


.....


テスト内容....


..


テスト内容....


テスト内容....< /p>

テスト内容....


テスト内容...

< ;div class="float2">フローティング コンテンツ 2

現在地 修正されました。スクロール バーを引くと効果が表示されます。





ie6 の postion:fixed の完璧なソリューション

彼の Web サイトは非常にスムーズですが、JS がないことに気付きました。 。共有すると比較的リソースが節約されます。しかし、効果は優れており、使いやすく、w3c を考慮しています。笑


ie-stuff.css


コピーコード

コードは次のとおりです。 🎜>top :expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
(documentElement.clientHeight-this.clientHeight) - 1
: ドキュメント.body.scrollTop (document.body.clientHeight-this.clientHeight) - 1);
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。