ホームページ > 記事 > ウェブフロントエンド > IE6_html/css_WEB-ITnoseでposition:fixed効果を実現する方法
IE6_html/css_WEB-ITnoseでposition:fixed効果を実現する方法
- WBOYオリジナル
- 2016-06-24 11:41:421068ブラウズ
IE6 でposition:fixed 効果を実現する方法:
推奨: 可能な限りコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。
IE6 はposition:fixed をサポートしていないため、多くの優れた効果を実現することはできません。ただし、IE6 でこの効果を実現する方法を紹介する例を示します。コード例は次のとおりです。
<!DOCTYPE html><html><head><meta charset=" utf-8"><title>IE6下实现position:fixed-蚂蚁部落</title><style type="text/css">body{ margin:40px; padding:0px; border:1px solid blue;}.first{ width:300px; height:600px; border:1px solid red; margin:20px;}.first .fixed{ width:100px; height:100px; background-color:black; position:fixed; _margin-top:20px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); left:20px; top:20px;}</style></head><body><div class="first"> <div class="fixed"></div></div></body></html> 上記のコードは、IE6 およびその他の主流ブラウザと互換性があります。 この効果を実現するためのコア コードは次のとおりです。
_top:expression(eval(document.documentElement.scrollTop));
注: 上記のコード行を追加すると、先頭にIE6では機能が無効になっているため、_margin-topを追加してください。
上記のコードは目的の機能を実現していますが、スクロールバーをドラッグすると揺れが発生するという問題がまだあります。コードは次のように変更されます。
<!DOCTYPE html><html><head><meta charset=" utf-8"><title>IE6下实现position:fixed-蚂蚁部落</title><style type="text/css">*{ margin:0px; padding:0px;}body{height:1000px;}#thediv{ width:100px; height:100px; background-color:#CCC; position:fixed; _margin-top:20px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); left:20px; top:20px; text-align:center; line-height:100px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){ $(window).scroll(function(){ $("#thediv").text($(window).scrollTop()); })}); </script></head><body><div id="thediv"></div></body></html> 上記のコードは、最初の例に基づいて、次のコードを追加します。
*html{ background-image:url(about:blank); background-attachment:fixed;} 元のアドレスは、http://www.51texiao です。 .cn/div_cssjiaocheng/2015/0405/144.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。