转学步园:jquery offset

JQuery Offset实验与应用

  我们有时候需要实现这样一种功能:点击一个按钮,然后在按钮的下方显示一个div。当按钮位于角落时,div的位置设定就需要计算,使div完全显示。

  我打算使用offset()方法实现此功能,但要先弄清楚他的功能。

实验:

  offset()的top是指元素与document的上边的距离,而不是浏览器当前窗体的上边缘,如图1。

  图1:document高度超过window,window出现滚动条,拖动滚动条,提交按钮的offset().top不变,因为按钮与document上边缘距离未变。

  

  图2:document中的div有滚动条,提交按钮的offset().top随div滚动条变化而变化,因为按钮与document上边缘距离已变。

  

  offset().left 同理。

  通过上面的实验我们可以得出以下结论:offset() 获取元素(html 元素)距离document上边缘、左边缘的像素,我们只要清楚浏览器中document是那部分就可以正确使用offset()。关于document可以阅读 JQuery   window、document、 body

应用:

  1.那么我们怎么保证元素完整的显示在浏览器视窗里呢?我们可以结合offset 和 scrollTop来实现。

  scrollTop获取的是什么值?根据我的实验,只有元素具有滚动条,并且滚动了一定距离,才有scrollTop值,没有滚动条的元素scrollTop=0。

  上面提交button无滚动条,它的scrollTop恒等于0。

  以前我有种错误的认知:document里面的元素与document具有相同的滚动值,这是错误的,子元素与容器的滚动值无关。

  按图1(document有滚动条),需计算控件的offsetTop、height,document的scrollTop;

  按图2(document无滚动条),计算控件的offsetTop、height

  2.浮动div在滚动条滚动时保持在原位

  按图1,

var firstTop = $("浮动DIV").offset().top;
var top = firstTop + $(document).scrollTop();
$(浮动DIV).offset({ top: top });

  按图2,

var top = $(浮动DIV).offset().top;
$("浮动DIV").offset({ top: top });

源代码:OffsetTraining.rar

时间: 2024-10-12 08:08:47

转学步园:jquery offset的相关文章

jQuery offset()源码解析

首先是原型上的offset方法,根据arguments判断到底是取值还是设值.如果是设置,就遍历调用静态方法jQuery.offset.setOffset 如果是取值.那么就是从"var docElem,win"这里开始了. jQuery.fn.offset = function( options ) { if ( arguments.length ) {//设置元素坐标 return options === undefined ?//如果传入的参数是undefined,直接返回 th

jquery offset获取div的位置top和left数值

js中绝对定位获取写起来比较复杂,如果使用jquery 我们可以借助于它的offset偏移来获取div top和left值,下面我整理一些例子. offset() 方法返回或设置匹配元素相对于文档的偏移(位置). 绝对位置:  代码如下 复制代码 var X = $('#DivID').offset().top;var Y = $('#DivID').offset().left; 返回第一个匹配元素的偏移坐标.该方法返回的对象包含两个整型属性:top 和 left,以像素计.此方法只对可见元素有

jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position

定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(tipContent);把提示控件加到body下 注意tipContent采用absolute定位,并设置top,left的值,当把tipContent加到body的最前面时,由于tipContent前面没有任何东西,因此它就是以body为基准根据top,left的值进行定位 $(this).offs

jquery offset相关疑问记录

今天项目里用到了js控制滚动条,就上网查阅相关资料, 最后决定选用jquery的offset来实现, 结果在调试过程当中发现一个问题, 就是$(document).offset()报错undefined, 而用$(document.body).offset()就可以, 对于这个迷惑我又进行了一些调查, 比如document和body的区别, 查阅之后发现document是整个网页文档,body是document的一个子节点, 解决了这个疑问又来看为什么$(document).offset()报错

jquery offset tip

/* * 这是一张 JavaScript 代码草稿纸. * * 输入一些 JavaScript,然后可点击右键或从“执行”菜单中选择: * 1. 运行 对选中的文本求值(eval) (Ctrl+R): * 2. 查看 对返回值使用对象查看器 (Ctrl+I): * 3. 显示 在选中内容后面以注释的形式插入返回的结果. (Ctrl+L) */ $('<div id=\'test\' style=\'position:absolute;background-color:red\'>test<

jQuery offset()函数 和 scrollTop()函数

$(dom).offset() 方法返回或设置匹配元素相对于文档的偏移(位置).{left:100,top:100} $(dom).scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. eg: 如果想让这段js被chrome和Firefox都支持的话,应该这样: $("html,body").animate({"scrollTop":top});

jQuery源码

/*! * jQuery JavaScript Library v1.8.3 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2012 jQuery Foundation and other contributors * Released under the MIT license * http://jquery.org/license * * Date: Tue Nov 13 20

jquery 2.1.0 源码

/*! * jQuery JavaScript Library v2.1.0 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license * * Date: 2

jQuery UI Datepicker使用介绍

本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨论jQuery UI Datepicker的使用,和中文本地化配置. 1.jQuery UI介绍 jQuery UI是一套基于jQuery控件和动画效果Javascript类库.可以用来构建交互式的互联网应用程序.最新版本1.10.4.基于jQuery 1.6+jQuery UI官方网站 2.jQu