如何在IE6下实现position:fixed效果:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
由于IE6并不支持position:fixed，所以导致很多好的效果都无法实现，但是在IE6下并不是不能够实现此中效果，下面就通过一段实例介绍一下如何实现此种效果。代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<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>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</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
时间： 2024-11-05 15:51:20