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 
          }






        

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM