在html中如何实现跟随页面滚动的DIV层？（就像网页上很多广告那样，拉下去了 广告始终在页面那位置）
2个回答
展开全部
这是右边的浮动导航
body{_background-image:none; /*հҳΪ*/_background-attachment:fixed; }//这个是针对ie6的
.navi{left:51%; margin-left:474px;top:120px;position:fixed;_position: absolute;_top: expression(documentElement.scrollTop + 120 + "px"); z-index:99;}
.navi a{background-image: url(背景地址); background-repeat:no-repeat;;display: block; width:119px;}
.navi a1{background-position: 0px 0px; height:30px;}
.navi a2{background-position: 0px -30px; height:30px;}
<div class="navi" id="navi">
<a href="" class="a1" ></a>
<a href="" class="a2"></a>
<script type='text/javascript'>
(function(){
var nav= document.getElementById('navi');
var fnav= function(){
var top= document.documentElement.scrollTop||document.body.scrollTop;
if(top>500){
nav.style.display = 'block';
nav.style.marginTop="0px";
}else{
nav.style.marginTop="500"-top+"px";
}
}
window.onload =window.onscroll = fnav;
})();
</script>
</div>
body{_background-image:none; /*հҳΪ*/_background-attachment:fixed; }//这个是针对ie6的
.navi{left:51%; margin-left:474px;top:120px;position:fixed;_position: absolute;_top: expression(documentElement.scrollTop + 120 + "px"); z-index:99;}
.navi a{background-image: url(背景地址); background-repeat:no-repeat;;display: block; width:119px;}
.navi a1{background-position: 0px 0px; height:30px;}
.navi a2{background-position: 0px -30px; height:30px;}
<div class="navi" id="navi">
<a href="" class="a1" ></a>
<a href="" class="a2"></a>
<script type='text/javascript'>
(function(){
var nav= document.getElementById('navi');
var fnav= function(){
var top= document.documentElement.scrollTop||document.body.scrollTop;
if(top>500){
nav.style.display = 'block';
nav.style.marginTop="0px";
}else{
nav.style.marginTop="500"-top+"px";
}
}
window.onload =window.onscroll = fnav;
})();
</script>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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=gb2312" />
<title>是不是一直在固定着呢</title>
</head>
<style type="text/css">
body{
background-image:url(about:blank); /* for IE6 */
background-attachment:fixed; /*必须*/
height:1500px;
}
#ads{
width:300px;
height:250px;
position:fixed;
right:0;
bottom:0;
_position:absolute;
_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
border:1px solid red;
}
</style>
<body>
<div id=ads>
<h1>是不是一直在固定着呢?</h1>
</div>
</body>
</html>
在firefox跟ie8中测试可以，你可以试下其它的，呵呵。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>是不是一直在固定着呢</title>
</head>
<style type="text/css">
body{
background-image:url(about:blank); /* for IE6 */
background-attachment:fixed; /*必须*/
height:1500px;
}
#ads{
width:300px;
height:250px;
position:fixed;
right:0;
bottom:0;
_position:absolute;
_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
border:1px solid red;
}
</style>
<body>
<div id=ads>
<h1>是不是一直在固定着呢?</h1>
</div>
</body>
</html>
在firefox跟ie8中测试可以，你可以试下其它的，呵呵。
更多追问追答
追问
_position:absolute;
_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
表示什么意思？
追答
这个在ie6下的兼容的，只有ie6可以识别。
表示绝对定位下距顶部的距离用一个表达式表达。
参考资料： 迷失曾经
本回答被提问者采纳
已赞过
已踩过<
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
