当元素处于相对位置元素时，查找元素偏离窗口的jQuery或JavaScript方法

jQuery or JavaScript method of finding an elements off set to the window when the element is in a relative position element

本文关键字：元素 窗口 方法 JavaScript 查找 jQuery 于相对 相对 位置      更新时间：2023-09-26

我有几个元素卡在容器中，它们被设置为相对定位的父元素。这些元素需要添加自定义工具提示，工具提示是相对元素之外的固定位置元素。因此，当固定元素试图与窗口一起工作时，根据相关元素的父元素设置偏移量，因为它的偏移量使固定元素难以在我们希望它们的元素下对齐。

我试图展示我所尝试的代码的混乱，但在这一点上，它只是垃圾，因为我在明显正确的方向之外走了很多方向，我错过了它需要重写。在此之前，我需要弄清楚如何获得我需要与固定元素对齐的元素的位置。

我希望这有意义。总之我需要基于窗口的位置，而不是家长的想法?

快速代码示例不完全是代码，但为了示例而显示它

<body>
   <div style="position:relative;overflow:hidden;">
       Some text more text <span class="something">Trigger text</span>
    </div>
    <div style="position:fixed"></div>
</body>

上面是我们正在讨论的代码的一个非常简单的例子。我的问题是，与相对的div是一个colorbox灯箱插件，也是一个包含元素之外的模板也是一个元素与相对定位和overflow设置为隐藏。在具有相对元素的同一元素中使用绝对和令人惊讶的(固定的)位置的问题是，如果我想要仅在某些时间显示的元素大于其设置的包含元素，则溢出会吃掉它，并且可以说它落入空白。我唯一能做的就是把一个固定的位置元素放在文档的底部，这样我就可以告诉它何时何地需要显示。问题是它使用整个窗口的左侧和顶部来定位，而不是导致相对容器中的元素表示其偏移量为100 top和50 left，这是考虑到正在发挥作用的元素的总体预期。我们希望找到一种方法找到元素的左上角相对于文档本身而不是父元素

一段代码或一个图表来显示你想要实现的目标会有很大帮助。jQuery提供了两个方法，可以用来查找元素的位置。您可能需要在css中设置工具提示和容器的任何子元素为position:absolute以使其正常工作。

offset()返回一个对象，该对象包含文档左上角元素的左位置和上位置。

position()返回一个对象，包含元素的左位置和上位置，从它最近的祖先的左上角开始。

scrollTop()和scrollLeft()返回浏览器窗口上方和左侧存在多少像素的文档。

希望这对你有帮助。

这个信息取自'Javascript &jQuery -缺少的手册'

相关文章：