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

js实现权限树的更新权限时的全选全消功能

Feb 17 Javascript

jQuery操作JSON的CRUD用法实例

Feb 25 Javascript

JS 调用微信扫一扫功能

Dec 22 Javascript

JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

Jul 07 Javascript

JavaScript实现的前端AES加密解密功能【基于CryptoJS】

Aug 28 Javascript

node.js之基础加密算法模块crypto详解

Sep 11 Javascript

JS 实现获取验证码倒计时功能

Oct 29 Javascript

vue使用微信JS-SDK实现分享功能

Aug 23 Javascript

微信小程序本地存储实现每日签到、连续签到功能

Oct 09 Javascript

element实现合并单元格通用方法

Nov 13 Javascript

js实现简单的打印表格

Jan 15 Javascript

JavaScript数组排序的六种常见算法总结

Aug 18 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

2020年4月放送决定！第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开！

2020/03/06 日漫

PHP IDE phpstorm 常用快捷键

2015/05/18 PHP

laravel实现上传图片并在页面显示的例子

2019/10/14 PHP

jQuery数组处理方法汇总

2011/06/20 Javascript

jquery实现弹出窗口效果的实例代码

2013/11/28 Javascript

javascript结合fileReader 实现上传图片

2015/01/30 Javascript

jQuery $.each遍历对象、数组用法实例

2015/04/16 Javascript

JavaScript声明变量名的语法规则

2015/07/10 Javascript

javascript解析xml实现省市县三级联动的方法

2015/07/25 Javascript

JavaScript程序中实现继承特性的方式总结

2016/06/24 Javascript

jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

2016/07/19 Javascript

jQuery实现的导航下拉菜单效果示例

2016/09/05 Javascript

微信小程序 animation API详解及实例代码

2016/10/08 Javascript

基于Vue实现后台系统权限控制的示例代码

2017/08/29 Javascript

简述Angular 5 快速入门

2017/11/04 Javascript

vue实现Excel文件的上传与下载功能的两种方式

2019/06/28 Javascript

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

2020/03/06 Javascript

JavaScript对象字面量和构造函数原理与用法详解

2020/04/18 Javascript

将Vue组件库更换为按需加载的方法步骤

2020/05/06 Javascript

只有 20 行的 JavaScript 模板引擎实例详解

2020/05/11 Javascript

Javascript数组及类数组相关原理详解

2020/10/29 Javascript

[02:29]DOTA2英雄基础教程陈

2013/12/17 DOTA

python fabric实现远程操作和部署示例

2014/03/25 Python

Python中的默认参数详解

2015/06/24 Python

Python 记录日志的灵活性和可配置性介绍

2018/02/27 Python

python调用OpenCV实现人脸识别功能

2018/05/25 Python

python 引用传递和值传递详解(实参,形参)

2020/06/05 Python

Python grequests模块使用场景及代码实例

2020/08/10 Python

Python selenium爬取微信公众号文章代码详解

2020/08/12 Python

纯CSS3实现地球自转实现代码(图文教程附送源码)

2012/12/26 HTML / CSS

html5中使用hotcss.js实现手机端自适配的方法

2020/04/23 HTML / CSS

出国考察邀请函

2014/01/21 职场文书

人力资源管理毕业生自荐信

2014/06/26 职场文书

学校党的群众路线教育实践活动整改措施

2014/10/25 职场文书

邀请书格式范文

2015/02/02 职场文书

培训感想范文

2015/08/07 职场文书