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 UrlDecode函数代码
Jan 09 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
如何让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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
浅谈Python 的枚举 Enum
2017/06/12 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
工程业务员工作职责
2013/12/07 职场文书
新品发布会主持词
2014/04/02 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
先进班组材料范文
2014/12/25 职场文书
介绍信格式样本
2015/05/05 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript