Абсолютное положение элемента на экране с помощью jQuery

Как узнать абсолютную позицию элемента на текущем видимом экране (viewport) с помощью 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;

Любые идеи?

Update: Мне нужно получить точный промежуток в пикселях между вершиной моего 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));

Спасибо...

Ответы

Ответ 1

Смотрите .offset() здесь документ jQuery. Он дает позицию относительно документа, а не родительской. Возможно, вы смутили .offset() и .position(). Если вам нужна позиция в окне вместо позиции в документе, вы можете вычесть значения .scrollTop() и .scrollLeft() для учета прокрученной позиции.

Здесь выдержка из документа:

Метод .offset() позволяет нам получить текущую позицию элемент относительно документа. Сравните это с .position(), который извлекает текущую позицию относительно родителя смещения. При позиционировании нового элемента поверх существующего для глобального манипуляции (в частности, для реализации drag-and-drop),.offset() является более полезным.

Чтобы объединить их:

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

Вы можете попробовать его здесь (прокрутите, чтобы увидеть изменения цифр): http://jsfiddle.net/jfriend00/hxRPQ/

Ответ 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;
}