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

关于event.cancelBubble和event.stopPropagation()的区别介绍

Dec 11 Javascript

举例说明JavaScript中的实例对象与原型对象

Mar 11 Javascript

Bootstrap3 datetimepicker控件使用实例

Dec 13 Javascript

详解jQuery停止动画——stop()方法的使用

Dec 14 Javascript

AngularJS实现tab选项卡的方法详解

Jul 05 Javascript

Node.js REPL (交互式解释器)实例详解

Aug 06 Javascript

vue实现单选和多选功能

Aug 11 Javascript

对vux点击事件的优化详解

Aug 28 Javascript

vue 刷新之后嵌套路由不变重新渲染页面的方法

Sep 13 Javascript

JavaScript 高性能数组去重的方法

Sep 20 Javascript

vue使用v-for实现hover点击效果

Sep 29 Javascript

详解ES6系列之私有变量的实现

Nov 21 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

destoon公司主页模板风格的添加方法

2014/06/20 PHP

PHP实现的多文件上传类及用法示例

2016/05/06 PHP

thinkPHP实现的联动菜单功能详解

2017/05/05 PHP

php生出随机字符串

2017/07/06 PHP

PHP聚合式迭代器接口IteratorAggregate用法分析

2017/12/28 PHP

PDO::prepare讲解

2019/01/29 PHP

php实现映射操作实例详解

2019/10/02 PHP

extjs 学习笔记四带分页的grid

2009/10/20 Javascript

jQuery 技巧小结

2010/04/02 Javascript

JS预览图像将本地图片显示到浏览器上

2013/08/25 Javascript

js控制网页前进和后退的方法

2015/06/08 Javascript

js实现人民币大写金额形式转换

2016/04/27 Javascript

基于BootStrap的图片轮播效果展示实例代码

2016/05/23 Javascript

AngularJS利用Controller完成URL跳转

2016/08/09 Javascript

微信js-sdk分享功能接口常用逻辑封装示例

2016/10/13 Javascript

利用js给datalist或select动态添加option选项的方法

2018/01/25 Javascript

echarts实现地图定时切换散点与多图表级联联动详解

2018/08/07 Javascript

详解微信小程序开发(项目从零开始)

2019/06/06 Javascript

layui table 表格上添加日期控件的两种方法

2019/09/28 Javascript

vue实现评价星星功能

2020/06/30 Javascript

详解Python中用于计算指数的exp()方法

2015/05/14 Python

深入理解Python中的super()方法

2017/11/20 Python

Python中将dataframe转换为字典的实例

2018/04/13 Python

基于python指定包的安装路径方法

2018/10/27 Python

Python机器学习之scikit-learn库中KNN算法的封装与使用方法

2018/12/14 Python

Python基于opencv调用摄像头获取个人图片的实现方法

2019/02/21 Python

我们为什么要减少Python中循环的使用

2019/07/10 Python

通过python实现随机交换礼物程序详解

2019/07/10 Python

python支付宝支付示例详解

2019/08/22 Python

python构建指数平滑预测模型示例

2019/11/21 Python

推荐10个CSS3 制作的创意下拉菜单效果

2014/02/11 HTML / CSS

流行文化收藏品：Sideshow（DC漫画，星球大战，漫威）

2019/03/17 全球购物

通信工程专业毕业生推荐信

2013/12/25 职场文书

公司职员入党自传书

2015/06/26 职场文书

python 如何获取页面所有a标签下href的值

2021/05/06 Python

阿里云k8s服务升级时502错误 springboot项目应用

2022/04/09 Servers