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实现的更多相关文章

  1. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

  2. HTML中元素的position属性详解

    HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935   HTML中DOM元素有5种定 ...

  3. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  4. (转)linux TOP命令各参数详解【转载】

    实时监控或查看系统资源使用情况的工具——TOP top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. 下面详细介绍它的使用方法: ( ...

  5. linux TOP命令各参数详解【转载】

    实时监控或查看系统资源使用情况的工具——TOP top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. 下面详细介绍它的使用方法: ( ...

  6. linux-linux top 命令各参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  7. linux top 命令各参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  8. jQuery中mouseleave和mouseout的区别详解

    很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p> ...

  9. CSS魔法堂:Position定位详解

    一.Position各属性值详解   1.  static :默认值,元素将按照正常文档流规则排列.   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top. ...

随机推荐

  1. Xamarin For Visual Studio 3.0.54.0 完整离线破解版(C# 开发Android、IOS工具 吾乐吧软件站分享)

    Xamarin For Visual Studio就是原本的Xamarin For Android 以及 Xamarin For iOS,最新版的已经把两个独立的插件合并为一个exe安装包了.为了区分 ...

  2. 我是这么给娃娃取名的(使用 node.js )

    依据: 81 命理,需要让五格都为大吉(吉).五格命理请自行谷歌. 我的是单姓复名.姓是固定的. 废话不说,上代码: Array.prototype.contains = function (k) { ...

  3. Linux LVM学习总结——删除卷组VG

    在Linux系统中,如何删除一个卷组(VG)呢? 下面我总结了一下如何删除卷组(VG)的具体步骤,仅供参考,如有不足,敬请指出.谢谢!在下面的例子中,我想删除卷组VolGroup05. 步骤1: 查看 ...

  4. Json学习笔记

    一.昨天内容回顾 创建ajax对象 a) 主流浏览器  new  XMLHttpRequest(); b) IE浏览器  new ActiveXObject("Msxml2.XMLHTTP. ...

  5. Fragment的使用

    1.要在需要使用fragment的Activity布局中添加<fragment></fragment>标签给fragment预留位置: 2.指定fragment对应的类,在类中 ...

  6. BOM与事件

    PPK谈JS学习笔记第二弹 JS的语言核心和DOM之间有一个过渡层,一般称为BOM,浏览器对象模型.是指JS的客户端实现,它不操作DOM,又不是JS的语言核心,它的主要功能是管理浏览器窗口,每个窗口都 ...

  7. WPF Tranform-Flip Image

    Use a ScaleTransform with a ScaleX of -1 for horizontal and ScaleY of -1 for vertical flipping, appl ...

  8. 《Paxos Made Simple》翻译

    1 Introduction 可能是因为之前的描述对大多数读者来说太过Greek了,Paxos作为一种实现容错的分布式系统的算法被认为是难以理解的.但事实上,它可能是最简单,最显而易见的分布式算法了. ...

  9. 【Python数据分析】工作日发文章比周末发文章访问量高?

    前言 看前面有位朋友分析了一下每天某个时间发文章的访问量区别,以讨论非系统性因素对文章访问量的影响.之所以进一步讨论工作日和周末发文对文章访问量的影响,一是觉得很有意思,二是毕业设计与此有很大关系,三 ...

  10. POJ2425 A Chess Game[博弈论 SG函数]

    A Chess Game Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 3917   Accepted: 1596 Desc ...