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

最新推荐文章于 2021-08-03 23:26:24 发布

Simple_Coffee

最新推荐文章于 2021-08-03 23:26:24 发布

阅读量653

点赞数

分类专栏：心情文章标签：悬浮跟随窗口的div javascript html css class

本文链接：https://blog.csdn.net/xiaowanziwuha/article/details/42621127

版权

心情专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果如下：

源代码：

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