编程 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 相关文章推荐

ie 调试javascript的工具

Apr 29 Javascript

Underscore源码分析

Dec 30 Javascript

基于javascript实现文字无缝滚动效果

Mar 22 Javascript

使用jsonp实现跨域获取数据实例讲解

Dec 25 Javascript

angular4实现tab栏切换的方法示例

Oct 21 Javascript

vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法

Sep 19 Javascript

小程序如何使用分包加载的实现方法

May 22 Javascript

微信小程序实现上传word、txt、Excel、PPT等文件功能

May 23 Javascript

Vue.js递归组件实现组织架构树和选人功能

Jul 04 Javascript

js prototype深入理解及应用实例分析

Nov 25 Javascript

vue实现瀑布流组件滑动加载更多

Mar 10 Javascript

微信小程序视频弹幕发送功能的实现

Dec 28 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

Discuz 5.0 中读取纯真IP数据库函数分析

2007/03/16 PHP

thinkphp实现发送邮件密码找回功能实例

2014/12/01 PHP

浅谈PHP eval()函数定义和用法

2016/06/21 PHP

浅析Laravel5中队列的配置及使用

2016/08/04 PHP

DWZ+ThinkPHP开发时遇到的问题分析

2016/12/12 PHP

input 高级限制级用法

2009/03/26 Javascript

JS+CSS实现带关闭按钮DIV弹出窗口的方法

2015/02/27 Javascript

JS实现淡蓝色简洁竖向Tab点击切换效果

2015/10/06 Javascript

常见的javascript跨域通信方法

2015/12/31 Javascript

jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)

2016/03/14 Javascript

JQuery Mobile 弹出式登录框的实现方法

2016/05/28 Javascript

JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

2016/06/05 Javascript

jQuery实现定位滚动条位置

2016/08/05 Javascript

相册展示PhotoSwipe.js插件实现

2016/08/25 Javascript

vue插件tab选项卡使用小结

2016/10/27 Javascript

JS使用正则截取两个字符串之间的字符串实现方法详解

2017/01/06 Javascript

javascript 正则表达式去空行方法

2017/01/24 Javascript

Angular 4中如何显示内容的CSS样式示例代码

2017/11/06 Javascript

微信小程序实现选项卡功能

2020/06/19 Javascript

Vue自定义指令实现checkbox全选功能的方法

2018/02/28 Javascript

如何使node也支持从url加载一个module详解

2018/06/05 Javascript

JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

2019/01/29 Javascript

javaScript 实现重复输出给定的字符串的常用方法小结

2020/02/20 Javascript

python文件操作seek()偏移量,读取指正到指定位置操作

2020/07/05 Python

python爬虫scrapy框架的梨视频案例解析

2021/02/20 Python

CSS3 实用技巧：实现黑白图像效果示例代码

2013/07/11 HTML / CSS

Html5移动端网页端适配(js+rem)

2021/02/03 HTML / CSS

SQL Server面试题

2016/10/17 面试题

.NET程序员的数据库面试题

2012/10/10 面试题

写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数

2016/04/13 面试题

青年文明号复核材料

2014/02/11 职场文书

婚前保证书

2014/04/29 职场文书

涨价通知怎么写

2015/04/23 职场文书

品德与社会教学反思

2016/02/24 职场文书

Pytest allure 命令行参数的使用

2021/04/18 Python

Spark SQL 2.4.8 操作 Dataframe的两种方式

2021/10/16 SQL Server