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 
　　　　　　　　　　}