Lấy khoảng cách của phần tử liên quan đến phần tử gốc của nó

Question

Tôi muốn biết cách lấy khoảng cách/offset/vị trí của một phần tử liên quan đến phần tử gốc của nó.

Không giống như chức năng position() jQuery, mà có được là vị trí tương đối với cha mẹ của bù đắp vị trí, tôi cần phải nhận được (giả sử) ổn định vị trí của một nguyên tố vì nó là khoảng cách từ đỉnh của phần tử chứa/mẹ.

dụ:

<div id="parent"> 
    <div id="pos1">Has a position of 0px from top of containing parent el.</div> 
    <br style="height:20px;"> 
    <br style="height:20px;"> 
    <div id="pos2">Has a position of 40px from top of containing parent el.</div> 
</div> 

Vì vậy, không có vấn đề gì vị trí của các yếu tố phụ huynh đến các tài liệu, vị trí của pos1 và pos2 sẽ được báo cáo như nhau, vì họ không thay đổi so với cha mẹ element ...

Điều này có khả thi không?

Answer 1

này nên làm điều đó:

$('#pos1').offset().top - $('#pos1').parent().offset().top - $('#pos1').parent().scrollTop() 

Answer 2

Parent.offset() - child.offset()?

Sử dụng jQuery bù đắp()

Answer 3

Mã này làm việc cho tôi.

var child_top = $("#parent_div").scrollTop() + $("#child_div").offset().top