仿照网易首页1【悬浮跟随页面滚动的div】

效果如下:

源代码:

<!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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值