编程 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 常用操作整理基础入门篇

Oct 14 Javascript

js实现的跟随鼠标移动的时钟效果(中英文日期显示)

Jan 17 Javascript

javascript浏览器兼容教程之事件处理

Jun 09 Javascript

jQuery 写的简单打字游戏可以提示正确和错误的次数

Jul 01 Javascript

JS原型、原型链深入理解

Feb 27 Javascript

Bootstrap学习笔记之环境配置(1)

Dec 07 Javascript

浅谈es6中export和export default的作用及区别

Feb 07 Javascript

Node.js npm命令运行node.js脚本的方法

Oct 10 Javascript

Vue中对iframe实现keep alive无刷新的方法

Jul 23 Javascript

layui-table对返回的数据进行转变显示的实例

Sep 04 Javascript

基于JS判断对象是否是数组

Jan 10 Javascript

vue项目中播放rtmp视频文件流的方法

Sep 17 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

mysql 的 like 问题，超强毕杀记！！！

2007/01/18 PHP

PHP stream_context_create()作用和用法分析

2011/03/29 PHP

tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例

2018/05/24 PHP

js字符编码函数区别分析

2008/06/05 Javascript

Javascript 的addEventListener()及attachEvent()区别分析

2009/05/21 Javascript

Jquery 获取对象的几种方式介绍

2014/01/17 Javascript

鼠标拖拽移动子窗体的JS实现

2014/02/25 Javascript

jquery跟js初始化加载的多种方法及区别介绍

2014/04/02 Javascript

我用的一些Node.js开发工具、开发包、框架等总结

2014/09/25 Javascript

浅谈javascript实现八大排序

2015/04/27 Javascript

jquery不常用方法汇总

2015/07/26 Javascript

学习JavaScript事件流和事件处理程序

2016/01/25 Javascript

jQuery实现内容定时切换效果完整实例

2016/04/06 Javascript

jQuery基于$.ajax设置移动端click超时处理方法

2016/05/14 Javascript

Bootstrap零基础入门教程(二)

2016/07/18 Javascript

dul无法加载bootstrap实现unload table/user恢复

2016/09/29 Javascript

JS正则表达式验证账号、手机号、电话和邮箱是否合法

2017/03/08 Javascript

BootStrap 页签切换失效的解决方法

2017/08/17 Javascript

Puppeteer 爬取动态生成的网页实战

2018/11/14 Javascript

jQuery实现高级检索功能

2019/05/28 jQuery

[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界

2014/03/26 DOTA

python optparse模块使用实例

2015/04/09 Python

python使用post提交数据到远程url的方法

2015/04/29 Python

Python实现导出数据生成excel报表的方法示例

2017/07/12 Python

详解Python自建logging模块

2018/01/29 Python

OpenCV-Python 摄像头实时检测人脸代码实例

2019/04/30 Python

余弦相似性计算及python代码实现过程解析

2019/09/18 Python

python代码打印100-999之间的回文数示例

2019/11/24 Python

浅谈在django中使用filter()(即对QuerySet操作)时踩的坑

2020/03/31 Python

如何设置PyCharm中的Python代码模版(推荐)

2020/11/20 Python

电子商务专员岗位职责

2013/12/11 职场文书

节能环保家庭事迹材料

2014/08/27 职场文书

见习报告格式范文

2014/11/08 职场文书

会计专业求职信范文

2015/03/19 职场文书

2015小学语文教师个人工作总结

2015/05/20 职场文书

标枪加油稿

2015/07/22 职场文书