文章/答案/技术大牛

发布

社区首页 >问答首页 >位置为offsetTop的元素的.top/ getBoundingClientRect().top

问位置为offsetTop的元素的.top/ getBoundingClientRect().top
EN

Stack Overflow用户

提问于 2019-10-26 22:45:11

回答 2查看 789关注 0票数 0

当带有position: sticky的元素达到他的偏移量(例如，top: 0)并在屏幕上停止时，我无法正确获取他的offsetTop，它显示的内容超出了必要的范围。同时，我无法获取getBoundingClientRect().top，因为它显示了0。请看下面的示例：

https://jsfiddle.net/Lxud76ma/

当元素粘滞时，它将保留其在DOM中的位置，但计算将在其实际位置上进行。

那么，当一个元素是粘性的时，我如何获得它的坐标呢？有什么想法吗？

getboundingclientrect

scroll

position

offset

sticky

回答 2

Stack Overflow用户

发布于 2019-10-27 03:44:10

我想我找到了答案，但如果有人知道更正确的方法，请纠正我。

在计算之前需要将元素的position从sticky更改为static。拿到他的坐标把他带回position: sticky

https://jsfiddle.net/Lk74do8u/

票数 1

Stack Overflow用户

发布于 2021-09-14 08:37:10

您只需要计算粘性元素的内容/子元素上的getBoundingClientRect。

    <div class="sticky" id="sticky">
      <div id="stickyContent">
        ...
      </div>
    </div>

我已经更新了你的例子：https://jsfiddle.net/3962n0ov/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58571818

复制

相似问题

问位置为offsetTop的元素的.top/ getBoundingClientRect().top
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问位置为offsetTop的元素的.top/ getBoundingClientRect().topEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问位置为offsetTop的元素的.top/ getBoundingClientRect().top
EN