IE6_html/css_WEB-ITnoseでposition:fixed効果を実現する方法-htmlチュートリアル-php.cn

IE6_html/css_WEB-ITnoseでposition:fixed効果を実現する方法

WBOY

リリース： 2016-06-24 11:41:42

オリジナル

1126 人が閲覧しました

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