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 
　　　　　　　　　　}