通过一个层的滚动条来控制另一个层的位置, 很难

bonnyone 2004-08-11 06:36:48
我在一个层(A)上放了一个层(B),A很大,有个滚动条,据个例子如A中有个输入框,现在我希望在A通过他自身的滚动条滚动时,层B能够固定在 A中输入框的下方, 这样很能需要用到相对位置了, 具体怎么做希望高手不啬赐教。。
...全文
141 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
bonnyone 2004-08-12
  • 打赏
  • 举报
回复
谢谢大家,我发现原因了,因为我把层B放在了层A的外面,虽然因为动态定位而显示在层A中,不过他不会随层A的滚动条而改变,现在我把他放在层A的里面 (就是html代码放在层A的里面), 就可以
michael_monkey 2004-08-11
  • 打赏
  • 举报
回复
不知道是不是下面这个效果
只做了垂直的位置跟随,横向同理

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript" type="text/JavaScript">
function fixIt(){
var ty; //往上滚动了多少
var lt; //输入框在LayerA中相对于顶上是多少
var ih; //输入框的高
var at; //layerA距离页面上部是多少
var toy //layerB应该处的位置
ty=document.all.LayerA.scrollTop;
lt=document.all.input1.offsetTop;
ih=document.all.input1.offsetHeight;
at=document.all.LayerA.offsetTop;

document.all.LayerB.style.top=at+lt+ih-ty
}
</script>
</head>

<body>
<div id="LayerA" name="LayerA" style="position:absolute; left:12px; top:4px; width:341px; height:400px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; overflow: scroll;" onscroll="fixIt()"><br>
layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>
<textarea name="input1" id="input1" cols="40"></textarea>
<br>
layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA<br>layerA</div>
<div id="LayerB" name="LayerB" style="position:absolute; left:255px; top:196px; width:231px; height:86px; z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;">layerB</div>
</body>
</html>
LxcJie 2004-08-11
  • 打赏
  • 举报
回复
<SCRIPT LANGUAGE="JavaScript">
<!--
//得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}
function setPos(num)
{
var oInput = document.all("txt" + num);
var arrPos = getPos(oInput);
b.style.left = arrPos[1];
b.style.top = arrPos[0];
}

//-->
</SCRIPT>
<div id=a style="width:400px;height:400px;overflow:scroll;background:black">
<INPUT TYPE="text" id="txt1"><BR><BR><BR>
<INPUT TYPE="text" id="txt2"><BR><BR><BR>
<INPUT TYPE="text" id="txt3"><BR><BR><BR>
<INPUT TYPE="text" id="txt4"><BR><BR><BR>
<div id=b style="height:30px;background:yellow;position:absolute">just a test</div>
</div>
<BR>
<INPUT TYPE="button" onclick="setPos(1)" value="置于第一个下面">
<INPUT TYPE="button" onclick="setPos(2)" value="置于第二个下面">
<INPUT TYPE="button" onclick="setPos(3)" value="置于第三个下面">
<INPUT TYPE="button" onclick="setPos(4)" value="置于第四个下面">


位置有点偏差
bonnyone 2004-08-11
  • 打赏
  • 举报
回复
是这个意思,,,, 不过因为有许多输入框,我现在要求这个层的位置需要动态的放在选定的输入框的下面,这个应该如何实现呢。 谢谢楼上两位阿
LxcJie 2004-08-11
  • 打赏
  • 举报
回复
呵呵,楼主的意思有点模糊啊,固定在a中输入框的下方??
这个不难啊,楼上正解,你要说的是b层始终跟随a层的滚动条移动,保持在a层的下方吧@_@
woyingjie 2004-08-11
  • 打赏
  • 举报
回复
<div id=a style="width:200px;height=200px;overflow:scroll;background:black">
<select></select>
<div id=b style="height=300px;background:yellow;"></div>
</div>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧