【问题标题】:jQuery or JavaScript method of finding an elements off set to the window when the element is in a relative position element当元素位于相对位置元素时,jQuery 或 JavaScript 方法来查找元素偏离设置到窗口
【发布时间】:2013-04-25 00:04:39
【问题描述】:

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

我会尝试展示我尝试过的代码的混乱,但它只是此时的垃圾,导致我在明显正确的方向之外走了很多方向,以至于我错过了它需要重写。所以在我这样做之前,我需要弄清楚如何获得我需要将固定元素对齐的元素的位置。

我希望这是有道理的。总之我需要基于窗口的位置,而不是父想法?

代码的快速示例并不完全是代码,而是为了示例而显示它

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

上面是我们正在讨论的代码的一个非常简单的示例。我的问题是,具有 relative 的 div 是一个彩盒灯箱插件,并且其中一个包含其之外元素的模板也是具有相对定位且 overflow 设置为隐藏的元素。在与相对元素相同的元素中使用绝对和令人惊讶(也固定)位置的问题是,如果我只想在特定时间显示的元素大于其设置的包含元素,则溢出会吃掉它可以这么说,它落入了虚无之中。我能够做到的唯一解决方法是在文档底部放置一个固定位置元素,然后我可以告诉它何时何地需要显示。问题在于它使用整个窗口的左侧和顶部来定位,而不是导致相对容器中的元素说它的偏移量是顶部 100 和左侧 50,考虑到正在播放的元素,这是整体预期的。所以希望找到一种方法来找到相对于文档本身而不是父元素的左上角元素

【问题讨论】:

  • 你用过jQuery的offset()吗?没用吗?
  • 是的,它似乎只捕获设置为相对的父级的偏移量,导致固定元素根据窗口本身顶部/左侧的正确像素数量定位自身我要与之对齐的元素的元素
  • 所以不要将它添加到父级的位置。
  • 虽然您确实描述了您的问题,但非常感谢能够看到一些代码。考虑添加一些代码,以便您的问题具有更高的价值
  • 非常松散的示例并添加了更多细节

标签: javascript jquery dom position positioning


【解决方案1】:

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

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

position() 返回一个对象,该对象包含一个元素从其最近定位的祖先的左上角开始的左上角位置。

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

希望对你有所帮助。

此信息取自“Javascript & jQuery - the missing manual

【讨论】:

    猜你喜欢
    • 2011-04-12
    • 1970-01-01
    • 2011-03-15
    • 1970-01-01
    • 2015-10-03
    • 1970-01-01
    • 2012-10-13
    相关资源
    最近更新 更多