话不多说先上图：

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. haploview出现“results file must contain a snp column”的解决方法

    将plink文件用“--recode HV ”的参数生成即可 /software/plink --file yourfile --recode HV --snps-only just-acgt --o ...

  2. 在spring中如何生成一个bean （一个对象，比如jedis的连接池对象）【我】

    在spring中,要想生成一个单例对象(比如jedis的连接池对象) 方法1: 在 spring中用 bean 标签生成(反正就是让spring生成并管理单例的对象) 方法2: 把要生成的单例对象类, ...

  3. Myeclipse启动报错：An error has occurred.See the log file

    出现这个问题是因为断电前myeclipse还在运行,日志报错如下: !ENTRY org.eclipse.osgi 4 0 2017-07-24 08:29:48.485 !MESSAGE An er ...

  4. testng+maven一些坑

    1. [TestNGContentHandler] [WARN] It is strongly recommended to add "<!DOCTYPE suite SYSTEM & ...

  5. RecyclerView不调用onCreateViewHolder和onBindViewHolder的解决方法

    在把RecyclerView和Fragment合并使用时,没有任何数据显示在RecyclerView上.挨个查看log输出,发现是Adapter未调用onCreateViewHolder和onBind ...

  6. Luogu P3868 [TJOI2009]猜数字

    题目链接 \(Click\) \(Here\) 中国剩余定理的板子.小心取模. #include <bits/stdc++.h> using namespace std; const in ...

  7. (set)产生冠军 hdu2094

    产生冠军 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  8. python自动化开发-[第二十一天]-form验证,中间件,缓存,信号,admin后台

    今日概要: 1.form表单进阶 2.中间件 3.缓存 4.信号 5.admin后台 上节课回顾 FBV,CBV 序列化 - Django内置 - json.dumps(xxx,cls=) Form验 ...

  9. 三台机器之间root用户ssh互信配置

    三台机器之间root用户ssh互信配置 (1)在所有的主机上执行:ssh-keygen -t rsa # 在每台都需要操作,一路回车 (2)将所有机子上公钥(id_rsa.pub)导到一个主机的/ro ...

  10. SQL语法基础之高级应用

    SQL语法基础之高级应用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.存储过程与函数 1>.CREATE PROCEDURE 用来创建存储过程 mysql> ? ...