使用jQuery在屏幕上的元素的绝对位置

Question

如何使用jQuery找出当前可见屏幕(视口)上元素的绝对位置？

我有position:relative,所以offset()只会在父级内给出偏移量.

我有分层div,所以$("#me").parent().offset() + $("#me").offset()也没有帮助.

我需要窗口中的位置,而不是文档,因此当滚动文档时,值应该更改.

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

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

有任何想法吗？

更新: 我需要得到div顶部和文档顶部之间的精确像素差距,包括填充/边距/偏移量？

我的代码:

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));

谢谢...

Answer 1

请参阅jQuery doc中的.offset()这里.它给出了相对于文档的位置,而不是父项.你也许有和混淆.如果您想要窗口中的位置而不是文档中的位置,则可以减去和值以考虑滚动位置..offset().position().scrollTop().scrollLeft()

以下是该文档的摘录:

.offset()方法允许我们检索元素相对于文档的当前位置.将此与.position()进行对比,该位置检索相对于偏移父项的当前位置.将新元素定位在现有元素之上以进行全局操作(特别是实现拖放)时,.offset()更有用.

结合这些:

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

你可以在这里试试(滚动查看数字变化):http://jsfiddle.net/jfriend00/hxRPQ/

Answer 2

对于我编写此函数的任何 jquery 元素的绝对坐标，它可能不适用于所有 css 位置类型，但也许对某人来说是一个好的开始..

function AbsoluteCoordinates($element) {
    var sTop = $(window).scrollTop();
    var sLeft = $(window).scrollLeft();
    var w = $element.width();
    var h = $element.height();
    var offset = $element.offset(); 
    var $p = $element;
    while(typeof $p == 'object') {
        var pOffset = $p.parent().offset();
        if(typeof pOffset == 'undefined') break;
        offset.left = offset.left + (pOffset.left);
        offset.top = offset.top + (pOffset.top);
        $p = $p.parent();
    }

    var pos = {
          left: offset.left + sLeft,
          right: offset.left + w + sLeft,
          top:  offset.top + sTop,
          bottom: offset.top + h + sTop,
    }
    pos.tl = { x: pos.left, y: pos.top };
    pos.tr = { x: pos.right, y: pos.top };
    pos.bl = { x: pos.left, y: pos.bottom };
    pos.br = { x: pos.right, y: pos.bottom };
    //console.log( 'left: ' + pos.left + ' - right: ' + pos.right +' - top: ' + pos.top +' - bottom: ' + pos.bottom  );
    return pos;
}

Answer 3

顺便说一句，如果有人想在不使用 jQuery 的情况下获取屏幕上元素的坐标，请尝试以下操作：

function getOffsetTop (el) {
    if (el.offsetParent) return el.offsetTop + getOffsetTop(el.offsetParent)
    return el.offsetTop || 0
}
function getOffsetLeft (el) {
    if (el.offsetParent) return el.offsetLeft + getOffsetLeft(el.offsetParent)
    return el.offsetleft || 0
}
function coordinates(el) {
    var y1 = getOffsetTop(el) - window.scrollY;
    var x1 = getOffsetLeft(el) - window.scrollX; 
    var y2 = y1 + el.offsetHeight;
    var x2 = x1 + el.offsetWidth;
    return {
        x1: x1, x2: x2, y1: y1, y2: y2
    }
}