效果如下:
源代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- //position:fixed; 相对于浏览器窗口绝对定位。_position:absolute; 只有IE6能识别, IE6不支持fixed, 所以针对IE6使用absolute绝对定位, 一般还要配套一个expression脚本来实现 -->
<!-- margin-top:100px; 外边距的上边距57个像素。外边距并不是当前内容与DIV盒子的边距,而是与外面的(网页边框)的距离 -->
<!-- position:fixed;//元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。 -->
<!-- z-index:999;//悬浮层级,默认是0,-1更低 -->
<!-- expression(eval(document.documentElement.scrollTop)); ie6支持属性_top,计算滚动的px -->
<!-- about:blank是打开浏览器空白页的命令。通常在打开没有特别设置起始页的浏览器情况下,首先看到的便是about:blank(空白页),也可能是se:blank(360安全浏览器、搜狗浏览器的空白页)等。 -->
<!-- background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。默认值 scroll; 如何设置固定的背景图像,body { background-image: url(bgimage.gif);background-attachment: fixed;} -->
<style type="text/css">
html, body {
width:100%;
margin:0px auto;
padding:0px auto;
}
.div1 {
height:2000px;
}
.div2 {
width:100%;
height:40px;
background-image:url(wy1.jpg);
}
.div2_1{
position:fixed;
width:100%;
height:40px;
z-index:999;
background-image:url(wy1.jpg);
top:0px;
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
</style>
<script type="text/javascript">
window.οnscrοll=function(){
//document.documentElement.scrollTop 页面向下滚动的距离px
//document.documentElement.scrollTop||document.body.scrollTop 增加兼容性,标准的xhtml document.body.scrollTop 为 0
var t=document.documentElement.scrollTop||document.body.scrollTop;
var div2=document.getElementById("div2");
if(t>= 0){
div2.className = "div2_1";
}else{
div2.className = "div2";
}
}
</script>
</head>
<body>
<div class="div1">
<div id="div2" class="div2"></div>
</div>
</body>
</html>