这个层的效果用position:fixed实现的很好,但是就是很纠结的ie6有问题
我今天试自己是这样实现的,但是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" />
<title>fix顶部</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<style>
*{padding:0px ; margin:0px;}
.top_nav{width:100%; height:30px; background:#CCC;}
.fix_box{width:200px; height:30px; background-color:#FFC; border:1px solid #F90;right:100px; top:10px; position:fixed; _position:absolute;}
</style>
<!--[if IE 6]>
<script>
$(function(){
$(window).scroll(function() {
var scrollsTop = $(this).scrollTop()+10;
$(".fix_box").css("top",scrollsTop);
})
})
</script>
<![endif]-->
</head>
<body>
<div class="top_nav">
<div class="fix_box"></div>
</div>
<div style="height:800px;"></div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fix顶部</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<style>
*{padding:0px ; margin:0px;}
.top_nav{width:100%; height:30px; background:#CCC;}
.fix_box{width:200px; height:30px; background-color:#FFC; border:1px solid #F90;right:100px; top:10px; position:fixed; _position:absolute;}
</style>
<!--[if IE 6]>
<script>
$(function(){
$(window).scroll(function() {
var scrollsTop = $(this).scrollTop()+10;
$(".fix_box").css("top",scrollsTop);
})
})
</script>
<![endif]-->
</head>
<body>
<div class="top_nav">
<div class="fix_box"></div>
</div>
<div style="height:800px;"></div>
</body>
</html>