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

禁止JQuery中的load方法装载IE缓存中文件的方法

Sep 11 Javascript

jQuery实现将div中滚动条滚动到指定位置的方法

Aug 10 Javascript

JS实现双击内容变为可编辑状态

Mar 03 Javascript

elemetUi 组件--el-upload实现上传Excel文件的实例

Oct 27 Javascript

Vue 中的受控与非受控组件的实现

Dec 17 Javascript

jQuery实现左右两个列表框的内容相互移动功能示例

Jan 27 jQuery

微信小程序云开发实现云数据库读写权限

May 17 Javascript

JS开发常用工具函数(小结)

Jul 04 Javascript

layui输入框只允许输入中文且判断长度的例子

Sep 18 Javascript

Vue3.0数据响应式原理详解

Oct 09 Javascript

JavaScript面向对象核心知识与概念归纳整理

May 09 Javascript

vue+axios全局添加请求头和参数操作

Jul 24 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

关于拼配咖啡，你要知道

2021/03/03 咖啡文化

PHP网站基础优化方法小结

2008/09/29 PHP

php懒人函数自动添加数据

2011/06/28 PHP

Yii列表定义与使用分页方法小结(3种方法)

2016/07/15 PHP

php技巧小结【推荐】

2017/01/19 PHP

JavaScript触发器详解

2007/03/10 Javascript

新浪刚打开页面出来的全屏广告代码

2007/04/02 Javascript

javascript 在网页中的运用(asp.net)

2009/11/23 Javascript

JS 文件传参及处理技巧分析

2010/05/13 Javascript

JavaScript italics方法入门实例（把字符串显示为斜体）

2014/10/17 Javascript

使用Node.js配合Nginx实现高负载网络

2015/06/28 Javascript

Bootstrap table使用方法详细介绍

2016/12/09 Javascript

javascript ES6中箭头函数注意细节小结

2017/02/17 Javascript

vue移动端裁剪图片结合插件Cropper的使用实例代码

2017/07/10 Javascript

浅谈vue-lazyload实现的详细过程

2017/08/22 Javascript

NodeJS实现自定义流的方法

2018/08/01 NodeJs

Vux+Axios拦截器增加loading的问题及实现方法

2018/11/08 Javascript

如何管理Vue中的缓存页面

2021/02/06 Vue.js

Python常见加密模块用法分析【MD5,sha,crypt模块】

2017/05/24 Python

python实现拓扑排序的基本教程

2018/03/11 Python

tensorflow 1.0用CNN进行图像分类

2018/04/15 Python

Python 中字符串拼接的多种方法

2018/07/30 Python

Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】

2019/01/05 Python

基于Django ORM、一对一、一对多、多对多的全面讲解

2019/07/26 Python

Python udp网络程序实现发送、接收数据功能示例

2019/12/09 Python

HTML高亮关键字的实现代码

2018/10/22 HTML / CSS

美国美妆网站：B-Glowing

2016/10/12 全球购物

印度尼西亚手表和包包商店：Urban Icon

2019/12/12 全球购物

班级聚会策划书

2014/01/16 职场文书

初中高效课堂实施方案

2014/02/26 职场文书

电子商务助理求职自荐信

2014/04/10 职场文书

乔布斯斯坦福大学演讲稿

2014/05/23 职场文书

2015年感恩母亲节活动方案

2015/05/04 职场文书

当你找不到方向的时候，不妨读读刘备的一生

2019/08/05 职场文书

Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)

2021/05/27 Servers

mysql中如何用命令创建联合唯一索引

2022/04/20 MySQL