offset()

一、语法

1、 返回偏移坐标

$(selector).offset();

top: $(selector).offset().top;

left: $(selector).offset().left;

获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

2. css()---left top

css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边后上边的距离,

明白了css的left和top的含义,可以看下jquery获取css的值,因为left和top也都是普通的css属性所以可以使用如下代码来获取

var left = $('#test').css('left');

var top = $('#test').css('top');

3.scrollTop() 方法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。

语法

$(selector).scrollTop(offset)

jquery offset(),的更多相关文章

  1. 转学步园:jquery offset

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

  2. Jquery Offset, Document, Window 都是什么

    From http://www.cnblogs.com/luhe/archive/2012/11/14/2769263.html   JQuery Offset实验与应用 我们有时候需要实现这样一种功 ...

  3. jQuery offset()源码解析

    首先是原型上的offset方法,根据arguments判断到底是取值还是设值.如果是设置,就遍历调用静态方法jQuery.offset.setOffset 如果是取值.那么就是从"var d ...

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

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  5. jquery offset() 与position()方法的区别

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

  6. jquery offset positon 获取位置不准的解决方法

    问题: 本地开发时,由于使用了图片,而且使用了offset().top涉及到图片所在的div距离计算的部分,本地开发一切都没问题:但是部署到服务器上时却出现布局错乱,经过排查发现总是少了一个图片高度的 ...

  7. jquery offset()和position()的区别

    <script src="jquery/jquery-3.3.1.min.js"></script> <script type="text/ ...

  8. jquery offset tip

    /* * 这是一张 JavaScript 代码草稿纸. * * 输入一些 JavaScript,然后可点击右键或从“执行”菜单中选择: * 1. 运行 对选中的文本求值(eval) (Ctrl+R): ...

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

    $(dom).offset() 方法返回或设置匹配元素相对于文档的偏移(位置).{left:100,top:100} $(dom).scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. ...

随机推荐

  1. 04_kafka python客户端_Producer模拟

    使用的python库: kafka-python 安装方式: pip install kafka-python 简单的模拟Producer """ Kafka Produ ...

  2. selenium-webdriver 简单教程

    ruby环境下selenium/webdriver可以通过selenium-webdriver.gem包进行安装 gem install selenium-webdriver   支持语言及版本有ru ...

  3. [原][译][physX]phsyX3.3.4官方文档物理引擎基本概念和例子介绍

    世界和物体: 物理世界包括集合的场景,每个包含的物体称为演员(Actors) 每个场景(Scene)都定义了自己的参考框架包含了所有的时间和空间 在不同的场景,演员不互相影响 演员通常有三种类型:刚体 ...

  4. 《剑指offer》第九题(用两个栈实现队列)

    // 面试题:用两个栈实现队列 // 题目:用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail // 和deleteHead,分别完成在队列尾部插入结点和在队列头部删除结点的 ...

  5. OpenGL入门程序五:三维绘制

    1.现实世界观察一个物体的时候,可能涉及到的三维变化: 1>视图变化------从不同的角度观察. 2>模型变化------移动.旋转物体,计算机中当然还可以对物体进行缩放. 3>投 ...

  6. 微服务API网关

    当你选择采用微服务构建自己的程序,则你需要考虑客户端怎样与后端服务交互.对于一个单体应用,仅有一个服务群提供服务(通过负载均衡器实现).在微服务架构里面,每一个服务都暴漏了一个服务器集群.本篇文章我们 ...

  7. jsp动作之 getProperty

    getProperty就是用来获取(读取)实例化的内容的. 说明了就是(Techerobj实例为样,用name=张三,age=21等属性) <%=Techerobj.getName()%> ...

  8. [.NET开发] C#实现的SQL备份与还原功能示例

    本文实例讲述了C#实现的SQL备份与还原功能.分享给大家供大家参考,具体如下: //记得加 folderBrowserDialog1 openFileDialog1 控件 using System.D ...

  9. codeforces 55d//Beautiful numbers// Codeforces Beta Round #51

    题意:一个数能整除它所有的位上的数字(除了0),统计这样数的个数. 注意离散化,为了速度更快需存入数组查找. 不要每次memset,记录下已有的长度下符合条件的个数. 数位dp肯定是从高位到低位. 记 ...

  10. android------锁屏(手机启动出现锁屏界面)

    以前用过一个红包锁屏的软件,第一次打开手机出现锁屏,滑动领取收益,当时觉得这功能不错,就查阅资料,写了一个案例, apk运行流程: 进入软件--->启动服务--->关闭手机(可先退出应用) ...