0

我有以下构造

文字详情
显示详情

文字
显示详情...

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

我已经组合了一个小的 JSfiddle，其中元素的绝对定位是可能的，但不知何故，我无法让它根据滚动位置动态工作。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';
4

5 回答 5

3

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

就这么简单：

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

jsFiddle 演示

PS - 注意我使用的是onclick事件而不是href。

于 2013-08-26T10:21:24.067 回答
1

您想获取单击元素的位置并将详细信息 div 向下移动。

请参阅：通过 javascript 获取元素的位置

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

于 2013-08-26T10:15:09.730 回答
0

如果您在小提琴中使用 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;
}
于 2013-08-26T10:24:04.310 回答
0

我只是在这里放了一个简单的 JSBin

基本上我们所做的是首先找出谁发出了调用，然后计算它的顶部位置，然后设置要移动的 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';
}
于 2013-08-26T10:25:44.947 回答
0

正如 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";
    });
});
于 2013-08-26T11:11:01.317 回答