在html中如何实现跟随页面滚动的DIV层?(就像网页上很多广告那样,拉下去了 广告始终在页面那位置)

 我来答
好口子
推荐于2017-09-10 · 好口子,手把手教你维护好你的征信!
好口子
采纳数:29399 获赞数:66629

向TA提问 私信TA
展开全部
这是右边的浮动导航
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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
火男第29号粉丝
推荐于2017-10-10 · TA获得超过439个赞
知道小有建树答主
回答量:905
采纳率:50%
帮助的人:384万
展开全部
<!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中测试可以,你可以试下其它的,呵呵。
更多追问追答
追问
_position:absolute;
_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

表示什么意思?
追答
这个在ie6下的兼容的,只有ie6可以识别。
表示绝对定位下距顶部的距离用一个表达式表达。

参考资料: 迷失曾经

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式