Javascript Div的动态定位
我有下面的结构 文本详细信息Javascript Div的动态定位,javascript,css,css-position,Javascript,Css,Css Position,我有下面的结构 文本详细信息 显示细节 文本 显示细节 当我按下“现在显示详细信息”时，我希望详细信息显示在与按下的链接相同的高度上。（想象100个文本/链接。） 我已经组装了一个小JSFIDLE，其中元素的绝对位置是可能的，但不知何故，我无法使它基于scrollposition动态工作 我尝试了以下javascript函数来设置位置： var div = document.getElementById('update'); //div.style.top = window.pageYOffs
显示细节 文本
显示细节 当我按下“现在显示详细信息”时，我希望详细信息显示在与按下的链接相同的高度上。（想象100个文本/链接。） 我已经组装了一个小JSFIDLE，其中元素的绝对位置是可能的，但不知何故，我无法使它基于scrollposition动态工作 我尝试了以下javascript函数来设置位置：
var div = document.getElementById('update');
//div.style.top = window.pageYOffset;
//div.style.top = document.body.parentElement.scrollTop;
//div.style.top = document.body.scrollTop;
div.style.top = '100px';
您希望获得单击元素的位置，并将details div移到下面 见：
您注释掉的代码具有非常不同的含义（如果您将scrollTop想象为类似函数，您可以看到它是在document.body上调用的，而不是您单击的元素）。我想我还应该注意到window，pageYOffset是window.scrollY的别名，您可能会找到更多关于它的文档 您希望获得单击元素的位置，并将details div移到下面 见： 您注释掉的代码具有非常不同的含义（如果您将scrollTop想象为类似函数，您可以看到它是在document.body上调用的，而不是您单击的元素）。我想我还应该注意到window，pageYOffset是window.scrollY的别名，您可能会找到更多关于它的文档 使用元素和属性 就这么简单：
function toCurrentPosition(event) {
var div = document.getElementById('update');
div.style.top = event.target.offsetTop + "px";
}
function toCurrentPosition(event) {
var div = document.getElementById('update');
div.style.top = event.target.offsetTop + "px";
}
请注意，我使用的是event而不是href。如果您在小提琴中使用jQuery，这里有一个简单的解决方案 JS HTML
如果您在小提琴中使用jQuery，这里有一个简单的解决方案 JS HTML
我只是建立了一个简单的JSBin 基本上，我们要做的是首先找出谁打了电话，然后计算它的顶部位置，然后设置要移动的div的顶部位置 HTML:
我只是建立了一个简单的JSBin 基本上，我们要做的是首先找出谁打了电话，然后计算它的顶部位置，然后设置要移动的div的顶部位置 HTML:
正如Itay所说，您可以使用目标信息。另外，如果您通过jQuery绑定事件，而不是在HTML上的每个链接上写入，则会更干净： HTML:
正如Itay所说，您可以使用目标信息。另外，如果您通过jQuery绑定事件，而不是在HTML上的每个链接上写入，则会更干净： HTML:
谢谢你的回答，我喜欢你的解决方案。基本上，我的解决方案是，我在测试中遗漏了+“px”。。。我讨厌css…谢谢你的回答，我喜欢你的解决方案。基本上，我的解决方案是，我在测试中遗漏了+“px”。。。我讨厌css…我把ScrollTop想象成这里所说的getter/setter:；-）我本打算使用这个术语，但强调scrollTop的getter-like功能回答了这个问题我本打算使用这个术语，但强调scrollTop的getter功能回答了这个问题。我在一些测试中遗漏了+“px”，这就是为什么它一直不起作用，谢谢你的回答！我在一些测试中遗漏了“+”px”，这就是为什么它一直不起作用，谢谢你的回复！我在一些测试中遗漏了“+”px”，这就是为什么它一直不起作用，谢谢你的回复！我在一些测试中遗漏了“+”px”，这就是为什么它一直不起作用，谢谢你的回复！谢谢你的回复，我知道。在我的项目中，OnClick使用AJAX查询服务器，OnSuccess方法更新div。我只想要一个小例子来证明我不工作的观点。：）谢谢你的回复，我知道。在我的项目中，OnClick使用AJAX查询服务器，OnSuccess方法更新div。我只想要一个小例子来证明我不工作的观点。：）
<div id="holder">
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
Long text <br />
<a href="#">Show Details</a> <br />
<div id="update">Itemlist1</div>
</div>
#holder {
position: relative;
}
#update {
position: absolute;
left: 100px;
top: 0px;
}
<div style="display: inline;
position: relative;
float: left;">
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
Long text <br />
<a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a> <br />
</div>
<div style="display: inline; position : relative;
float: left;" id="update">
Itemlist1
</div>
function toCurrentPosition(ele) {
var div = document.getElementById('update');
console.log(ele.offsetTop);
div.style.top = ele.offsetTop+'px';
}
<div class="my-show-details-list">
Long text <br />
<a name="a2">Show Details</a> <br />
Long text <br />
<a name="a2">Show Details</a> <br />
Long text <br />
<a name="a2">Show Details</a> <br />
Long text <br />
<a name="a2">Show Details</a> <br />
Long text <br />
</div>
$(function() {
//Here you select all the a tags inside the div and you apply them the same event:
$(".my-show-details-list>a").click(function() {
var div = document.getElementById('update');
div.style.top = event.target.offsetTop + "px";
});
});