使用jQuery在屏幕上的元素的绝对位置 [英] Absolute position of an element on the screen using jQuery

问题描述

如何使用jQuery在当前可见屏幕（视口）上找到元素的绝对位置？

How do I find out the absolute position of an element on the current visible screen (viewport) using jQuery?

我有位置：relative ，所以offset（）只会给出父对象内的偏移量。

I am having position:relative, so offset() will only give the offset within the parent.

$（＃me）。parent（）。offset（）+ $（＃me）。offset（）不起作用。

I have hierarchical divs, so $("#me").parent().offset() + $("#me").offset() doesn't help either.

我需要在窗口中的位置，而不是文档，所以当文档滚动时，值应该更改。

I need the position in the window, not the document, so when the document is scrolled, the value should change.

我知道我可以加所有的父偏移，但我想要一个更清洁的解决方案。

I know I could add up all the parent offsets, but I want a cleaner solution.

var top = $("#map").offset().top + 
    $("#map").parent().offset().top + 
    $("#map").parent().parent().offset().top +
    $("#map").parent().parent().parent().offset().top;

有任何想法吗？

更新：
我需要得到我的div顶部和文档顶部之间的确切间隔（像素），包括padding / margin / offset？

Update: I need to get the exact gap in pixels between the top of my div and the top of the document, including padding/margins/offset?

我的代码：

HTML

<div id="map_frame" class="frame" hidden="hidden">
    <div id="map_wrapper">
        <div id="map"></div>
    </div>
</div>

CSS

#map_frame{
    border:1px solid #800008;
}

#map_wrapper {
    position:relative;
    left:2%;
    top:1%;
    width:95%;
    max-height:80%;
    display:block;
}

#map {
    position:relative;
    height:100%;
    width:100%;
    display:block;
    border:3px solid #fff;
}

jQuery调整地图大小以填满屏幕*

var t = $("#map").offset().top + 
    $("#map").parent().offset().top + 
    $("#map").parent().parent().offset().top + 
    $("#map").parent().parent().parent().offset().top;

$("#map").height($(window).height() - t - ($(window).height() * 8 / 100));

谢谢...

推荐答案

请参阅 jQuery文档中的 .offset（） 。它给出了相对于文档的位置，而不是父代。您可能有 .offset（）和 .position（）困惑。如果你想要在窗口中的位置，而不是文档中的位置，你可以减去 .scrollTop（）和 .scrollLeft / code>值来计算滚动位置。

See .offset() here in the jQuery doc. It gives the position relative to the document, not to the parent. You perhaps have .offset() and .position() confused. If you want the position in the window instead of the position in the document, you can subtract off the .scrollTop() and .scrollLeft() values to account for the scrolled position.

以下是文档的摘录：

.offset（）方法允许我们检索
元素相对于文档的当前位置。与.position（），
对比，它检索相对于偏移父对象的当前位置。
当在全局
操作（特别是实现拖放操作）时，在一个新元素的上面放置一个新元素时，
.offset（）是更有用的。 p>

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.

要合并这些：

var offset = $("selector").offset();
var posY = offset.top - $(window).scrollTop();
var posX = offset.left - $(window).scrollLeft(); 

您可以在这里尝试（滚动查看数字变化）：http://jsfiddle.net/jfriend00/hxRPQ/

You can try it here (scroll to see the numbers change): http://jsfiddle.net/jfriend00/hxRPQ/

这篇关于使用jQuery在屏幕上的元素的绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！