编程 Javascript

jquery offset函数应用实例

Posted in Javascript onNovember 14, 2012

我们有时候需要实现这样一种功能：点击一个按钮，然后在按钮的下方显示一个div。当按钮位于角落时，div的位置设定就需要调整，不然，div将显示不完全。

我打算使用offset()方法实现此功能，但要先弄清楚他的功能。

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

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

jquery offset函数应用实例

图2：document中的div有滚动条，提交按钮的offset随div的滚动变化而变化，与document无关

jquery offset函数应用实例

offset().left 同理。

通过上面的实验我们可以得出以下结论：offset() 获取指元素(html 元素)距离document上边缘、左边缘的像素，我们只要清楚浏览器中document是那部分就可以正确使用offset()。关于document可以阅读 JQuery window、document、 body

那么我们怎么保证元素完整的显示在浏览器视窗里呢？我们可以结合offset 和 scrollTop来实现。

scrollTop获取的是什么值？根据我的实验，只有元素具有滚动条，并且滚动了一定距离，才有scrollTop值，没有滚动条的元素scrollTop=0，比如一个button的scrollTop恒等于0。以前我有种错误的认知：document与他里面的子元素具有相同的滚动值，这是错误的，子元素与容器的滚动值无关。

按图1(document有滚动条)，需计算控件的offsetTop、高度，document的scrollTop；

按图2(document无滚动条)，计算控件的offsetTop、高度

源代码:jquery_offset.rar

jquery offset函数应用实例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 学习笔记（五）

Dec 31 Javascript

让网页跳转到指定位置的jquery代码非书签

Sep 06 Javascript

基于JavaScript实现div层跟随滚动条滑动

Jan 12 Javascript

基于JavaScript实现在新的tab页打开url

Aug 04 Javascript

JavaScript中原型链存在的问题解析

Sep 25 Javascript

详解js中Number()、parseInt()和parseFloat()的区别

Dec 20 Javascript

JSON与js对象序列化实例详解

Mar 16 Javascript

angularjs实现上拉加载和下拉刷新数据功能

Jun 12 Javascript

JavaScript作用域、闭包、对象与原型链概念及用法实例总结

Aug 20 Javascript

利用Vue构造器创建Form组件的通用解决方法

Dec 03 Javascript

详解vue 路由跳转四种方式 (带参数)

Apr 28 Javascript

JS定义函数的几种常用方法小结

May 23 Javascript

如何让div span等元素能响应键盘事件操作指南

Nov 13 #Javascript

给artDialog 5.02 增加ajax get功能详细介绍

Nov 13 #Javascript

jquery1.83 之前所有与异步列队相关的模块详细介绍

Nov 13 #Javascript

Google的跟踪代码动态加载js代码方法应用

Nov 12 #Javascript

Javascript开发之三数组对象实例介绍

Nov 12 #Javascript

在浏览器窗口上添加遮罩层的方法

Nov 12 #Javascript

php对mongodb的扩展(小试牛刀)

Nov 11 #Javascript

You might like

人族 Terran 魔法与科技

2020/03/14 星际争霸

基于mysql的论坛（1）

2006/10/09 PHP

libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢

2010/03/15 PHP

php的$_FILES的临时储存文件与回收机制实测过程

2013/07/12 PHP

PHP中读取文件的8种方法和代码实例

2014/08/05 PHP

laravel 5.4中实现无限级分类的方法示例

2017/07/27 PHP

js下用gb2312编码解码实现方法

2009/12/31 Javascript

jQuery的初始化与对象构建之浅析

2011/04/12 Javascript

jquery多选项卡效果实例代码(附效果图)

2013/03/23 Javascript

从数组中随机取x条不重复数据的JS代码

2013/12/24 Javascript

利用JavaScript检测CPU使用率自己写的

2014/03/22 Javascript

JavaScript中Object.prototype.toString方法的原理

2016/02/24 Javascript

使用bootstrap validator的remote验证代码经验分享(推荐)

2016/09/21 Javascript

VueJs与ReactJS和AngularJS的异同点

2016/12/12 Javascript

js按条件生成随机json:randomjson实现方法

2017/04/07 Javascript

vue 打包后的文件部署到express服务器上的方法

2017/08/09 Javascript

vue+springboot前后端分离实现单点登录跨域问题解决方法

2018/01/30 Javascript

灵活使用console让js调试更简单的方法步骤

2019/04/23 Javascript

js字符串类型String常用操作实例总结

2019/07/05 Javascript

vue单元格多列合并的实现

2020/11/26 Vue.js

玩转python爬虫之爬取糗事百科段子

2016/02/17 Python

python读取二进制mnist实例详解

2017/05/31 Python

Django使用uwsgi部署时的配置以及django日志文件的处理方法

2019/08/30 Python

Django框架查询Extra功能实现解析

2019/09/04 Python

Python tkinter常用操作代码实例

2020/01/03 Python

Python3.7实现验证码登录方式代码实例

2020/02/14 Python

浅谈python中频繁的print到底能浪费多长时间

2020/02/21 Python

涂鸦板简单实现 Html5编写属于自己的画画板

2016/07/05 HTML / CSS

澳大利亚在线家具、灯饰和家居装饰店：LivingStyles

2018/11/20 全球购物

美国糖果店：Sugarfina

2019/02/21 全球购物

如何向接受结构参数的函数传入常数值

2016/02/17 面试题

社区七一党员活动方案

2014/01/25 职场文书

货车司机岗位职责

2014/03/18 职场文书

2014年便民服务中心工作总结

2014/12/20 职场文书

Spring Boot配合PageHelper优化大表查询数据分页

2022/04/20 Java/Android

Django框架模板用法详解

2022/06/10 Python