博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery的offset().top 和position().top 详解 和如何用js实现
阅读量:6087 次
发布时间:2019-06-20

本文共 643 字,大约阅读时间需要 2 分钟。

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           }

 

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6202649.html

你可能感兴趣的文章
开源磁盘加密软件VeraCrypt教程
查看>>
本地vs云:大数据厮杀的最终幸存者会是谁?
查看>>
阿里云公共镜像、自定义镜像、共享镜像和镜像市场的区别 ...
查看>>
shadowtunnel v1.7 发布:新增上级负载均衡支持独立密码
查看>>
Java线程:什么是线程
查看>>
mysql5.7 创建一个超级管理员
查看>>
【框架整合】Maven-SpringMVC3.X+Spring3.X+MyBatis3-日志、JSON解析、表关联查询等均已配置好...
查看>>
要想成为高级Java程序员需要具备哪些知识呢?
查看>>
带着问题去学习--Nginx配置解析(一)
查看>>
onix-文件系统
查看>>
java.io.Serializable浅析
查看>>
我的友情链接
查看>>
多线程之线程池任务管理通用模板
查看>>
CSS3让长单词与URL地址自动换行——word-wrap属性
查看>>
CodeForces 580B Kefa and Company
查看>>
开发规范浅谈
查看>>
Spark Streaming揭秘 Day29 深入理解Spark2.x中的Structured Streaming
查看>>
鼠标增强软件StrokeIt使用方法
查看>>
本地连接linux虚拟机的方法
查看>>
某公司面试java试题之【二】,看看吧,说不定就是你将要做的题
查看>>