话不多说先上图：

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. PHP和PHP-FPM 配置文件优化

    前言:乘着这次空闲,来记录下关于PHP和PHP-FPM配置文件的优化,也方便以后自己复习. 先说PHP的 1.PHP脚本执行时间 max_execution_time = 30 该选项设定PHP程序的 ...

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

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

  3. RAND_MAX

    RAND_MAX 指的是 C 语言标准库 <stdlib.h> 中定义的一个宏.经预编译阶段处理后, 它展开为一个整数类型的常量表达式.RAND_MAX 是 <stdlib.h> ...

  4. CodeForces 55D "Beautiful numbers"（数位DP+离散化处理）

    传送门 参考资料: [1]:CodeForces 55D Beautiful numbers(数位dp&&离散化) 我的理解: 起初,我先定义一个三维数组 dp[ i ][ j ][ ...

  5. UltraCompare文件内容比较工具

    http://www.52pojie.cn/thread-541895-1-1.html 云盘里有<ignore_js_op> <ignore_js_op> UltraComp ...

  6. emacs简易配置

    (setq-default inhibit-startup-message t tab-width 4 c-basic-offset 4 indent-tabs-mode t) (tool-bar-m ...

  7. python nmap

    #!/usr/bin/env python# -*- coding: utf-8 -*-import sysimport nmap scan_row = []input_data = input('P ...

  8. lucene创建索引的几种方式(一)

    什么是索引: 根据你输入的值去找,这个值就是索引 第一种创建索引的方式: 根据文件来生成索引,如后缀为.txt等的文件 步骤: 第一步:FSDirectory.open(Paths.get(url)) ...

  9. bzoj2957 奥妙重重的线段树

    https://www.lydsy.com/JudgeOnline/problem.php?id=2957 线段树的query和update竟然还可以结合起来用! 题意:小A的楼房外有一大片施工工地, ...

  10. POJ3662 SPFA//二分 + 双端队列最短路

    https://cn.vjudge.net/problem/12427/origin 题意:求1到N第K + 1大条边权最小的路径 首先想到dp递推,dp[x][y]表示到x这个点经过y条免费边的最小 ...