jquery的offset().top 和position().top 详解 和如何用js实现

1 jquery定义:

  offset().top 相对于当前文档的坐标(的高度)
           ps:包括滚动条卷去的高度   position().top 返回的是相对于其定位的祖辈元素的坐标
(的高度)
            ps:包括滚动条卷去的高度

一图胜千言!

 统一前提

      绿色容器 margin-top: 10px

  每一个红色小盒子  80px height:80px

a情况

jquery的offset().top  和position().top 详解 和如何用js实现

b情况

jquery的offset().top  和position().top 详解 和如何用js实现

 c 情况

jquery的offset().top  和position().top 详解 和如何用js实现

2 结论

 js中

offsetTop 始终指向相对于其定位的祖辈元素的坐标的高度,是固定的,无论祖先元素 是否滚动  ps:(意思就是这个元素自己没有滚动条 他的祖先元素有滚动条,)
scrollTop  指向自己被卷去的高度,ps:(意思就是这个元素是祖先元素,它自己有滚动条,)
  所以 jquery 中的 $domtext.offset().top   ==
    
        var jsTop = 0;
       jsTop += domtext.offsetTop ;

    遍历 domtext的所有祖先元素

          jsTop += 祖先元素的scrollTop 

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