ie6下實現position:fixed效果實例介紹

2024-07-11 08:36:42

字體：大中小

來源：轉載

供稿：網友

建議:盡可能的手寫代碼，可以有效的提高學習效率和深度。
由于IE6并不支持position:fixed，所以導致很多好的效果都無法實現，但是在IE6下并不是不能夠實現，下面就通過一段實例介紹一下如何實現此種效果。代碼實例如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”author” content=”http://www.softwhy.com/” />
<title>螞蟻部落</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下top功能失效了，所以要加一個_margin-top。
雖然上面的代碼實現了想要的功能，但是還是有點問題，那就是當拖動滾動條的時候會出現顫抖現象。代碼修改如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”author” content=”http://www.softwhy.com/” />
<title>螞蟻部落</title>
<style type=”text/css”>
*html
{
background-image:url(about:blank);
background-attachment:fixed;
}
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));