从顶部获取元素的位置

时间:2015-02-16 03:54:32

标签: javascript jquery position offset

我知道我可以使用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的块,显示它们与父容器顶部的偏移量。但是,如果我将页面刷新一半(例如,在第二个块)或使用锚点加载到第二个块,我将获得-500,0,500,1000,1500。

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

感谢您的帮助!

编辑:我认为我发现了问题。我有另一个容器(100vh高度)包装块的父容器(请参阅更新的jsfiddle)。因此,当我滚动时,它是移动的父容器,但容器包装器没有。

所以,为什么使用.position()相对于.parent元素返回的位置没有,但似乎是相对于.parent-container元素?在这种情况下我该如何解决问题?

1 个答案:

答案 0 :(得分:0)

我认为你的问题是dist是你定义它的全局变量。改为var dist。你基本上每次都要覆盖它。 :/

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

 html, body{

    padding: 0;
    margin: 0;        
 }

这应该有所帮助。