话不多说先上图：

offset()的top是指元素与document的上边的距离，而不是浏览器当前窗体的上边缘，如图

document高度超过window，浏览器出现滚动条，滚动滚动条，提交按钮的offset不变。

总结一下：offsetTop是当前对象到其上级层顶部的距离.

不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

JQ中的 offsetTop 和 offset().top 的区别的更多相关文章

  1. JQ的offset().top与js的offsetTop区别详解

    一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...

  2. JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  3. jquery的offset().top和js的offsetTop的区别，以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...

  4. jquery的offset().top与javascript的offsetTop区别？

    offset().top是jquery的方法,需引入jquery,它获取你绑定元素上边框相对于html上边界的偏移量 offsetTop是原生js的方法,它获取你绑定元素上边框相对于离自己最近且pos ...

  5. div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。

    先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...

  6. jQuery中animate与scrollTop、offset().top实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  8. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  9. jq中

    1.jquery位置信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. 团体程序设计天梯赛(CCCC) L3014 周游世界 BFS证明

    团体程序设计天梯赛代码.体现代码技巧,比赛技巧.  https://github.com/congmingyige/cccc_code

  2. 正向选择（positive selection）、中性选择（neutral selection）、平衡选择（balancing selection）示意图

    正向选择:某一位点逐渐积累,成优势的位点,具体表现为:随着时间延长,该位点的突变allele频率越来越高,远远超过野生型allele: 中性选择:随着时间的延长,总体频率没有改变太多: 平衡选择:位点 ...

  3. This Gradle plugin requires a newer IDE able to request IDE model level 3. For Android Studio this means v3+

    在项目的gradle.properties配置文件中加入以下这句: gradle.properties中:android.injected.build.model.only.versioned = 3

  4. google chrome 浏览器书签丢失问题

    在一次新打开标签页时,电脑卡死,强制重启后打开google chrome 浏览器,发现历史什么的都在,但书签栏全部丢失了 找到 系统盘:\Users\用户名\AppData\Local\Google\ ...

  5. 三台机器之间ssh互信配置

    三台机器之间ssh互信配置 环境介绍:192.168.65.128    my1-222192.168.65.129  my2-223192.168.65.130    web224 # 步骤一:# ...

  6. CSS外边框、边界样式常用组合

    一.CSS框线一览表 border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border ...

  7. 运维监控-使用Zabbix Server 添加自定义 item

    运维监控-使用Zabbix Server 监控自定义 item  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客就直接开门见山如何使用Zabbix Server 监控自定义 ...

  8. linux查看IP

    1:输入 ifconfig,出现如下信息,找到eno16777736(网卡ip信息的配置文件名) 2:输入 cd /etc/sysconfig/network-scripts 找到网卡ip信息的配置文 ...

  9. OPCServer：使用Matrikon OPC Server Simulation

    实验用模拟OPCServer 旧版(50M):Matrikon OPC Server Simulation(v1.5.0.0),百度网盘,密码: mcur 新版(157M):Matrikon OPC ...

  10. HDU 1035(走迷宫 模拟)

    题意是给定初始位置在一个迷宫中按照要求前进,判断多少步能离开迷宫或者多少步会走入一个长达多少步的循环. 按要求模拟前进的位置,对每一步在 vis[ ] 数组中进行已走步数的记录,走出去或走到已走过的位 ...