從頂部獲取元素的位置

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的塊，顯示它們與父容器頂部的偏移量。 但是，如果我將頁面刷新一半（例如，在第二個塊處）或將錨點加載到第二個塊，則會得到-500、0、500、1000、1500。

我已經嘗試過.position()和.offset()但結果相同。 因此，我想知道的是，無論頁面加載在哪里，如何始終如一地獲得第一個示例中的結果？ 基本上，我只是想從父容器的頂部知道它們的位置。

感謝您的幫助！

編輯：我認為我發現了問題。 我還有另一個容器（高度為100vh），包裝了塊的父容器（請參閱更新的jsfiddle）。 因此，當我滾動時，移動的是父容器，但容器包裝沒有移動。

那么， 為什么不使用相對於.parent元素的.position()返回位置，卻相對於.parent-container元素呢？ 在這種情況下應如何解決？

Answer 1

我認為您的問題是dist是您定義它的方式的全局變量。 更改為var dist。 基本上，您每次都覆蓋它。 ：/

我還編輯了你的小提琴。 注意身體填充:) http://jsfiddle.net/ugxag1wg/2/

 html, body{

    padding: 0;
    margin: 0;        
 }

這應該有所幫助。