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 = ;
jsTop += domtext.offsetTop ; 遍历 domtext的所有祖先元素 jsTop += 祖先元素的scrollTop if(祖先元素 定位了){
jsTop += 当前祖先元素的offsetTop
}
jquery的offset().top 和position().top 详解 和如何用js实现的更多相关文章
- JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...
- HTML中元素的position属性详解
HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定 ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- (转)linux TOP命令各参数详解【转载】
实时监控或查看系统资源使用情况的工具——TOP top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. 下面详细介绍它的使用方法: ( ...
- linux TOP命令各参数详解【转载】
实时监控或查看系统资源使用情况的工具——TOP top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. 下面详细介绍它的使用方法: ( ...
- linux-linux top 命令各参数详解
简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...
- linux top 命令各参数详解
简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...
- jQuery中mouseleave和mouseout的区别详解
很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p> ...
- CSS魔法堂:Position定位详解
一.Position各属性值详解 1. static :默认值,元素将按照正常文档流规则排列. 2. relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top. ...
随机推荐
- Xamarin For Visual Studio 3.0.54.0 完整离线破解版(C# 开发Android、IOS工具 吾乐吧软件站分享)
Xamarin For Visual Studio就是原本的Xamarin For Android 以及 Xamarin For iOS,最新版的已经把两个独立的插件合并为一个exe安装包了.为了区分 ...
- 我是这么给娃娃取名的(使用 node.js )
依据: 81 命理,需要让五格都为大吉(吉).五格命理请自行谷歌. 我的是单姓复名.姓是固定的. 废话不说,上代码: Array.prototype.contains = function (k) { ...
- Linux LVM学习总结——删除卷组VG
在Linux系统中,如何删除一个卷组(VG)呢? 下面我总结了一下如何删除卷组(VG)的具体步骤,仅供参考,如有不足,敬请指出.谢谢!在下面的例子中,我想删除卷组VolGroup05. 步骤1: 查看 ...
- Json学习笔记
一.昨天内容回顾 创建ajax对象 a) 主流浏览器 new XMLHttpRequest(); b) IE浏览器 new ActiveXObject("Msxml2.XMLHTTP. ...
- Fragment的使用
1.要在需要使用fragment的Activity布局中添加<fragment></fragment>标签给fragment预留位置: 2.指定fragment对应的类,在类中 ...
- BOM与事件
PPK谈JS学习笔记第二弹 JS的语言核心和DOM之间有一个过渡层,一般称为BOM,浏览器对象模型.是指JS的客户端实现,它不操作DOM,又不是JS的语言核心,它的主要功能是管理浏览器窗口,每个窗口都 ...
- WPF Tranform-Flip Image
Use a ScaleTransform with a ScaleX of -1 for horizontal and ScaleY of -1 for vertical flipping, appl ...
- 《Paxos Made Simple》翻译
1 Introduction 可能是因为之前的描述对大多数读者来说太过Greek了,Paxos作为一种实现容错的分布式系统的算法被认为是难以理解的.但事实上,它可能是最简单,最显而易见的分布式算法了. ...
- 【Python数据分析】工作日发文章比周末发文章访问量高?
前言 看前面有位朋友分析了一下每天某个时间发文章的访问量区别,以讨论非系统性因素对文章访问量的影响.之所以进一步讨论工作日和周末发文对文章访问量的影响,一是觉得很有意思,二是毕业设计与此有很大关系,三 ...
- POJ2425 A Chess Game[博弈论 SG函数]
A Chess Game Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 3917 Accepted: 1596 Desc ...