jquery的offset().top 和position().top 詳解 和如何用js實現

1 jquery定義：

　　offset().top 相對於當前文檔的坐標（的高度）
　　　　　　　　　　　ps:包括滾動條卷去的高度

　　position().top 返回的是相對於其定位的祖輩元素的坐標（的高度）

　　　　　　　　　　　　ps:包括滾動條卷去的高度

一圖勝千言！

 統一前提

      綠色容器 margin-top: 10px

　　每一個紅色小盒子  width:80px height:80px

a情況

b情況

 

 c 情況

 

2 結論

 js中

offsetTop 始終指向相對於其定位的祖輩元素的坐標的高度，是固定的，無論祖先元素 是否滾動  ps:(意思就是這個元素自己沒有滾動條 他的祖先元素有滾動條，)

scrollTop　　指向自己被卷去的高度，ps:(意思就是這個元素是祖先元素，它自己有滾動條，)

  所以 jquery 中的 $domtext.offset().top   ==
    
        var jsTop = 0;
       jsTop += domtext.offsetTop ;

　　　　遍歷 domtext的所有祖先元素

　         jsTop += 祖先元素的scrollTop 

　　　　　　if(祖先元素 定位了){
　　　　　　　　　　 jsTop += 當前祖先元素的offsetTop 
　　　　　　　　　　}