ie6下完成position:fixed实际效果案例详细介绍

日期:2020-09-24 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

提议:尽量的笔写编码,能够合理的提升学习培训高效率和深层。
因为IE6其实不适用position:fixed,因此致使许多好的实际效果都没法完成,可是在IE6下其实不是不可以够完成,下面就根据1段案例详细介绍1下怎样完成此种实际效果。编码案例以下:

拷贝编码
编码以下:

<!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⑻" />
<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));

留意:再加了上面这1行编码以后,IE6下top作用无效了,因此要加1个_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⑻" />
<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));
left:20px;
top:20px;
}
</style>
</head>
<body>
<div class="first">
<div class="fixed"></div>
</div>
</body>
</html>

以上编码完善完成了大家要想的作用,在第1段案例基本上加上以下编码:

拷贝编码
编码以下:

*html
{
background-image:url(about:blank);
background-attachment:fixed;
}