jquery获取元素到页面顶部的距离

2017-01-19 15:07:44

在前端开发过程中，经常会遇到要求滚动条滚动到某位置时某按钮固定在页面上，否则悬浮于页面上。这时就会用到获取需要固定在页面位置的元素距离页面顶部的距离，通过比较文档滚动条到顶部的距离和页面元素到顶部距离的大小便可确定。

在jquery中有一个语句可以获取到元素到顶部的距离，语法为

代码语言：javascript复制

$(selector).offset().top

下面看一个例子

代码语言：javascript复制

<div style="height:800px"> </div>
<div id="footer_luofanitng_com_cn" style="text-align:center; margin-left:auto;margin-right:auto; margin-top:20px">落帆亭 Copyright<span style="font-family:Arial;">&copy;</span> <span style="font-size:18px;">luofanting.com.cn
</span></div>

那么 $("#footer_luofanting_com_cn").offset().top 就是元素到页面顶部的距离。

jquery com footer offset 语法

0 人点赞