Bezwzględne położenie elementu na ekranie za pomocą jQuery

Question

Jak mogę określić bezwzględną pozycję elementu na bieżącym widocznym ekranie (widoku) za pomocą jQuery?

Mam position:relative, więc offset() spowoduje tylko przesunięcie w rodzica.

Mam hierarchiczne divy, więc $("#me").parent().offset() + $("#me").offset() też nie pomaga.

Potrzebuję pozycji w oknie, a nie dokumentu, więc podczas przewijania dokumentu wartość powinna się zmienić.

Wiem, że mogłem dodać wszystkie offsety rodzica, ale chcę czystszego rozwiązania.

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

Wszelkie pomysły?

Aktualizacja: muszę uzyskać dokładny lukę w pikselach między szczycie mojej div i górnej części dokumentu, w tym obszycia/marginesów/offset?

Mój kod:

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, aby zmienić rozmiar mapy, aby wypełnić ekran *

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

Dzięki ...

Answer 1

Zobacz .offset() tu the jQuery doc. Podaje pozycję w stosunku do dokumentu, a nie do rodzica. Być może masz pomieszane .offset() i .position(). Jeśli chcesz umieścić pozycję w oknie zamiast pozycji w dokumencie, możesz odjąć wartości .scrollTop() i .scrollLeft(), aby uwzględnić przewijaną pozycję.

Oto fragment z dokumentu: Metoda

.offset() pozwala nam pobrać aktualną pozycję elementu w stosunku do dokumentu. Porównaj to z .position(), , która pobiera aktualną pozycję względem rodzica offsetu. Podczas pozycjonowania nowego elementu nad istniejącym dla globalnej manipulacji (w szczególności dla implementacji przeciągania i upuszczania), bardziej użyteczne jest ustawienie .offset().

połączyć te:

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

Można spróbować tu (przewijać, aby zobaczyć zmianę numerów): http://jsfiddle.net/jfriend00/hxRPQ/

Answer 2

dla absolutnych współrzędnych dowolnego elementu jquery Napisałem tę funkcję, to prawdopodobnie nie działa dla wszystkich typów pozycji css, ale może to dobry początek dla kogoś ..

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