从顶部获取元素的位置

Question

我知道我可以使用 jQuery 的 .position() 和 .offset()，但我不知道为什么它们不能像描述的那样工作（分别相对于父级和相对于文档）。

我有这些代码：http://jsfiddle.net/ugxag1wg/1/ http://jsfiddle.net/ugxag1wg/3/

（与 jsfiddle 相同）：假设我有 5 个块，每个块高 500px，并使用以下代码：

$(".block").each(function(){
    dist = $(this).position();

    $(this).data("distance", dist.top );

    $(this).text( $(this).data("distance") );
})

如果我自己加载页面效果很好。但是，如果我不在顶部位置时刷新它（或将锚加载到顶部下方的一个块中），我将不会获得第一个块的 0 值。相反，它会否定我正在寻找的地方。

例如，如果我重新加载页面，我应该分别为块获得 0、500、1000、1500 和 2000，显示它们与父容器顶部的偏移量。但是，如果我在中途刷新页面（例如，在第 2 块）或使用锚点加载到第 2 块，我将得到 -500、0、500、1000、1500。

我尝试了.position() 和.offset()，但结果相同。所以，我想知道的是，如何才能始终如一地获得第一个示例中的结果，无论页面加载在何处？基本上，我只想知道他们从顶部开始的位置它们的父容器。

感谢您的帮助！

编辑：我想我找到了问题所在。我有另一个容器（高度为 100vh）包装块的父容器（请参阅更新的 jsfiddle）。所以当我滚动时，是父容器移动了，但容器包装器没有。

那么，为什么使用 .position() 返回的位置不是相对于 .parent 元素，但似乎是相对于 .parent-container 元素？我应该如何解决这个问题这种情况？

Answer 1

我认为您的问题是 dist 是您定义的全局变量。更改为 var dist。您基本上每次都在覆盖它。 ：/

我还编辑了你的小提琴。请记住身体填充:) http://jsfiddle.net/ugxag1wg/2/

 html, body{

    padding: 0;
    margin: 0;        
 }

这应该会有所帮助。