编程 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弹出框轻量级插件jquery.boxy使用介绍

Jan 15 Javascript

jquery点击页面任何区域实现鼠标焦点十字效果

Jun 21 Javascript

jQuery淡入淡出元素让其效果更为生动

Sep 01 Javascript

javascript 事件处理示例分享

Dec 31 Javascript

jQuery学习笔记之jQuery中的$

Jan 19 Javascript

javascript时间戳和日期字符串相互转换代码(超简单)

Jun 22 Javascript

全面了解javascript三元运算符

Jun 27 Javascript

JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案

Jul 27 Javascript

jQuery如何解决IE输入框不能输入的问题

Oct 08 Javascript

微信小程序实现图片上传放大预览删除代码

Jun 28 Javascript

小程序如何构建骨架屏

May 29 Javascript

vue3弹出层V3Popup实例详解

Jan 04 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

laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子

2019/11/14 PHP

用js查找法实现当前栏目的高亮显示的代码

2007/11/24 Javascript

Js 随机数产生6位数字

2010/05/13 Javascript

javascript学习笔记(六) Date 日期类型

2012/06/19 Javascript

javascript中的window.location.search方法简介

2013/09/02 Javascript

Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

2014/02/12 Javascript

JavaScript必知必会（二) null 和undefined

2016/06/08 Javascript

jQuery实现复选框的全选和反选

2017/02/02 Javascript

JavaScript requestAnimationFrame动画详解

2017/09/14 Javascript

vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

2018/02/10 Javascript

微信小程序实现获取小程序码和二维码java接口开发

2019/03/29 Javascript

vuex实现数据状态持久化

2019/11/11 Javascript

[02:19]DOTA2女子战队FOX视频专访：希望更多美眉一起加入

2013/10/15 DOTA

[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮

2016/02/27 DOTA

[03:41]2018完美盛典-《Fight With Us》

2018/12/16 DOTA

py2exe 编译ico图标的代码

2013/03/08 Python

python进程类subprocess的一些操作方法例子

2014/11/22 Python

python使用webbrowser浏览指定url的方法

2015/04/04 Python

简单了解python模块概念

2018/01/11 Python

Django重装mysql后启动报错：No module named ‘MySQLdb’的解决方法

2018/04/22 Python

浅析PHP与Python进行数据交互

2018/05/15 Python

不知道这5种下划线的含义,你就不算真的会Python！

2018/10/09 Python

对Python3 解析html的几种操作方式小结

2019/02/16 Python

pymongo中聚合查询的使用方法

2019/03/22 Python

python批量爬取下载抖音视频

2019/06/17 Python

python读取Kafka实例

2019/12/23 Python

Pycharm最新激活码2019(推荐)

2019/12/31 Python

Python Django中间件使用原理及流程分析

2020/06/13 Python

基于tensorflow for循环 while循环案例

2020/06/30 Python

《放小鸟》教学反思

2014/04/20 职场文书

2014年光棍节活动策划方案（创意集锦）

2014/09/29 职场文书

同意报考公务员证明

2015/06/17 职场文书

2015年重阳节活动主持词

2015/07/30 职场文书

谢师宴家长答谢词

2015/09/30 职场文书

2016年离婚协议书范文

2016/03/18 职场文书

解决Jupyter-notebook不弹出默认浏览器的问题

2021/03/30 Python