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

Javascript 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
jquery maxlength使用说明
Sep 09 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
Angular Material Icon使用详解
Nov 07 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
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
Javascript函数的参数
2015/07/16 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
python万年历实现代码 含运行结果
2017/05/20 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
入党现实表现材料
2014/12/23 职场文书
休学证明范本
2015/06/19 职场文书
运动会广播稿200字
2015/08/19 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android