div+css中如何将层随着滚动条的移动的初始位置固定在导航栏左下方
3个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>随屏滚动</title>
<meta charset="UTF-8" />
<style type="text/css">
*{padding:0;margin:0;}
html{height:100%;}
body{height:200%;}
.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
</head>
<body>
<div class="box" id="box1" style="bottom:0;left:0;">AD1</div >
<div class="box" id="box2" style="top:0;right:0;">AD2</div >
</body>
<script type="text/javascript">
var id=function(o){return document.getElementById(o)}
var scroll=function (o){
var space=id(o).offsetTop;
id(o).style.top=space+'px';
void function(){
var goTo = 0;
var roll=setInterval(function(){
var height =document.documentElement.scrollTop+document.body.scrollTop+space;
var top = parseInt(id(o).style.top);
if(height!= top){
goTo = height-parseInt((height - top)*0.9);
id(o).style.top=goTo+'px';
}
//else{if(roll) clearInterval(roll);}
},1);
}()
}
scroll('box1');
scroll('box2');
</script>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>随屏滚动</title>
<meta charset="UTF-8" />
<style type="text/css">
*{padding:0;margin:0;}
html{height:100%;}
body{height:200%;}
.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
</head>
<body>
<div class="box" id="box1" style="bottom:0;left:0;">AD1</div >
<div class="box" id="box2" style="top:0;right:0;">AD2</div >
</body>
<script type="text/javascript">
var id=function(o){return document.getElementById(o)}
var scroll=function (o){
var space=id(o).offsetTop;
id(o).style.top=space+'px';
void function(){
var goTo = 0;
var roll=setInterval(function(){
var height =document.documentElement.scrollTop+document.body.scrollTop+space;
var top = parseInt(id(o).style.top);
if(height!= top){
goTo = height-parseInt((height - top)*0.9);
id(o).style.top=goTo+'px';
}
//else{if(roll) clearInterval(roll);}
},1);
}()
}
scroll('box1');
scroll('box2');
</script>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
/* 这里是按钮CSS样式 */
#fast{position:fixed;top:50%;right:0px;width:25px;z-index:200;}
#fast p{width:13px;}
<!-- ***********这里是按钮的开始************ -->
<div id="fast">
<a href="#header">顶<br/>部</a><br/><br/><a href="#comments">评<br/>论</a><br/><br/><a href="#footer">底<br/>部</a>
<!--****所指向的链接要和主题的ID对应！***** -->
</div>
<!-- *********按钮结束*********** -->
#fast{position:fixed;top:50%;right:0px;width:25px;z-index:200;}
#fast p{width:13px;}
<!-- ***********这里是按钮的开始************ -->
<div id="fast">
<a href="#header">顶<br/>部</a><br/><br/><a href="#comments">评<br/>论</a><br/><br/><a href="#footer">底<br/>部</a>
<!--****所指向的链接要和主题的ID对应！***** -->
</div>
<!-- *********按钮结束*********** -->
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
没太看懂你说的啥意思，最简单的办法用个绝对定位直接定位浏览器得了！
追问
用绝对位置 层显示的位置是0.0这个坐标 不在导航栏的左下方
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
