JQ中的 offsetTop 和 offset().top 的区别

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

JQ中的 offsetTop 和 offset().top 的区别

话不多说先上图: offset()的top是指元素与document的上边的距离,而不是浏览器当前窗体的上边缘,如图 document高度超过window,浏览器出现滚动条,滚动滚动条,提交按钮的offset不变. 总结一下:offsetTop是当前对象到其上级层顶部的距离. 不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.…

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

一.前言最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因为不了解它们区别,而带来BUG的死坑.这里通过实验整理,做个清晰好懂的笔记,如果你也想弄清,建议复制我的代码跟着操作,印象会更为深刻. 二.offset().top与offsetTop什么意思?它们都是相对谁的上偏移量? offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑定元…

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

壹 ❀ 引我在 JQ的offset().top与js的offsetTop区别详解这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset().top = offsetTop - scrollTop的结论,不过此结论只适用于监听元素滚动条,而window的滚动条并不满足.那么在滚动window滚动条时如何获取元素距离视窗顶部的距离呢,这就不得说说本文的主角getBoundingClientRect方法. 贰 ❁ 关于getBoundi…

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

jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑定元素上边框相对于html上边界的偏移量. offsetTop是原生JS的方法,它获取的是你绑定元素上边框相对离自己最近且position属性为非static的祖先元素的偏移量 offset().top与offsetTop偏移量参照对象不同,offset().top始终是html,而offsetTo…

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

offset().top是jquery的方法,需引入jquery,它获取你绑定元素上边框相对于html上边界的偏移量 offsetTop是原生js的方法,它获取你绑定元素上边框相对于离自己最近且position属性为非static的祖先元素的偏移量区别一:offset().top与offsetTop偏移量参照对象不同,offset().top始终是html,而offsetTop相对于其祖先position 的…

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

先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce-leftBox"> //左边的内容 </div> <div class="ce-rightBox"> //右边的内容 </div> </div> 2.css .ce-container { background: white…

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

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:(…

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

原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. 1.在文档(document)对象里面用: scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子--网页正文全宽) scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在…

jq中

1.jquery位置信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .box{ width: 100px; height: 100px; background-color: red; pa…