Question

我有以下构造

文本详情
  显示详细信息

文本
  显示详细资料   ...

当我按下现在显示详细信息我希望细节显示在与按下的链接相同的高度。（想象一下100个文字/链接。）

我已经把一个小的JSfiddle放在一起，其中元素的绝对定位是可能的，但不知怎的，我不能让它根据scrollposition动态工作。 http://jsfiddle.net/uRN64/201/

我尝试了以下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';

Answer 1

使用e.target元素和offsetTop属性。

这很容易：

function toCurrentPosition(event) {
    var div = document.getElementById('update');
    div.style.top = event.target.offsetTop + "px";
}

jsFiddle Demo

P.S - 注意我正在使用onclick事件而不是href。

Answer 2

您想要获取被点击元素的位置并将详细信息div移到那里。

请参阅：Get position of element by javascript

您注释掉的代码具有非常不同的含义（如果您想象scrollTop类似于函数，您可以看到它在document.body上调用，而不是您单击的元素）。我想我应该注意窗口，pageYOffset是window.scrollY的别名，你可能会找到更多的文档。

Answer 3

如果您在小提琴中使用jQuery，这是一个简单的解决方案DEMO

JS

$(document).ready(function(){
    $('a').click(function(e){
        e.preventDefault();
        var top = $(this).offset().top;
        $('#update').css({ 'top': top + 'px' });
    });
});

HTML

<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>

CSS

#holder {
    position: relative;
}
#update {
    position: absolute;
    left: 100px;
    top: 0px;
}

Answer 4

我刚刚提出了一个简单的JSBin here

基本上我们正在做的是首先找出谁打了电话，然后计算其最高位置，然后设置要移动的div的顶部位置。

HTML：

<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>

JS：

function toCurrentPosition(ele) {
    var div = document.getElementById('update');
    console.log(ele.offsetTop);
    div.style.top = ele.offsetTop+'px';
}

Answer 5

正如Itay所说，你可以使用目标信息。如果您通过jQuery绑定事件而不是在HTML上的每个链接上进行写入，那么它会更清晰：

http://jsfiddle.net/uRN64/210/

HTML：

<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>

JS：

$(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";
    });
});

Div的动态定位

5 个答案: