ie6下实现position:fixed效果实例介绍

ttx9n · 发表于 2013-2-16 09:39:02

由于IE6并不支持position:fixed，所以导致很多好的效果都无法实现，但是在IE6下并不是不能够实现，下面就通过一段实例介绍一下如何实现此种效果；建议:尽可能的手写代码，可以有效的提高学习效率和深度,感兴趣的朋友可以了解下，或许本文对你有所帮助建议:尽可能的手写代码，可以有效的提高学习效率和深度。
由于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));
left:20px;
top:20px;
}
</style>
</head>
<body>
<div class="first">
<div class="fixed"></div>
</div>
</body>
</html>

以上代码完美实现了我们想要的功能，在第一段实例基础上添加如下代码:

复制代码代码如下:
*html
{
background-image:url(about:blank);
background-attachment:fixed;
}

kwa3hgmjp · 发表于 2022-12-31 19:44:46

非常vbcbvcvbvcb

0vwrdf6 · 发表于 2023-1-4 20:43:43

的沙发水电费水电费

95nd4ba · 发表于 2023-2-26 05:38:07

还有人在不。。。。。。。。。。啊

feiyasqhr · 发表于 2023-8-31 20:43:47

额风风风微风微风违法

e5plu · 发表于 2023-9-24 07:50:02

了乐趣了去了去了去了去了

JosephSA · 发表于 2023-10-9 16:22:18

哟哟哟哟哟以偶

.l4 · 发表于 2024-3-28 09:01:23

儿飞飞微风DVD谁vdsvd

360784533 · 发表于 2024-4-9 23:26:31

下载来瞧瞧

4k0mp7m · 发表于 2024-4-20 19:46:53

了乐趣了去了去了去了去了

账号		自动登录	找回密码
密码			立即注册

[CSS] ie6下实现position:fixed效果实例介绍

相关帖子