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

OECOM

发布于 2020-07-01 17:27:08

5.1K0

发布于 2020-07-01 17:27:08

文章被收录于专栏：OECOMOECOM

2017-01-19 15:07:44

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

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

$(selector).offset().top

下面看一个例子

<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 就是元素到页面顶部的距离。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-01-19，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery