Question

我基本上有2个div元素。第一个是滚动容器，第二个是放置在容器中的元素。我想找到相对于滚动容器的y位置。我将所有内容都包含在一段标题为如何找到蓝先生的示例代码中？

<div style="height:100px; border:solid 1px black; overflow-y:scroll;">
    Please scroll down...
    <br/>
    <div style="height:400px;">
    </div>
    <br/>
    <div id="MrBlue" style="height:20px; background-color:blue; color:white">
        Mr. Blue
    </div>
</div>

所以我想要一个 JavaScript / jQuery语句来提醒先生的垂直位置。蓝色。 div 相对到滚动容器。

聚苯乙烯。如果你想与先生“小提琴”。蓝色，请检查http://jsfiddle.net/KeesCBakker/Qjr5q/。

Answer 1

如果您可以将css position: relative添加到包装/滚动容器中，那么它就像

一样简单

document.getElementById('MrBlue').offsetTop

和jsfiddle示例http://jsfiddle.net/eU3pN/2/

Answer 2

您可以使用jQuery position

$(document).ready(function() {
    alert($("#MrBlue").position().top);
});

请参阅此jsfiddle

更新：容器必须position:relative;，否则无法正常工作

请参阅此更新jsfiddle

Answer 3

Jquery的.position（）

.position（）方法允许我们   检索一个当前位置   相对于偏移父元素的元素。   将此与.offset（）对比   检索当前位置   相对于文件。什么时候   将新元素定位在另一个元素附近   一个并且在同一个包含DOM   元素，.position（）是更多   是有用的。

返回包含的对象   属性顶部和左侧。

http://jqapi.com/#p=position

如何找到元素与其父元素的“相对”位置？或者：如何找到蓝先生？

3 个答案: