Posizione assoluta di un elemento sullo schermo utilizzando jQuery

Question

Come individuare la posizione assoluta di un elemento sullo schermo visibile corrente (viewport) utilizzando jQuery?

Sto avendo position:relative, quindi offset() darà solo l'offset all'interno del genitore.

Ho div gerarchico, quindi $("#me").parent().offset() + $("#me").offset() non aiuta neanche.

Ho bisogno della posizione nella finestra, non del documento, quindi quando il documento scorre, il valore dovrebbe cambiare.

So che potrei sommare tutti gli offset genitore, ma voglio una soluzione più pulita.

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

Qualche idea?

Aggiornamento: ho bisogno di ottenere il divario esatto in pixel tra parte superiore della mia div e la parte superiore del documento, tra cui imbottitura/margini/offset?

Il mio codice:

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 per ridimensionare la mappa per riempire lo schermo *

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

Grazie ...

Answer 1

Vedi .offset() qui a the jQuery doc. Dà la posizione relativa al documento, non al genitore. Forse hai .offset() e .position() confuso. Se si desidera la posizione nella finestra anziché la posizione nel documento, è possibile sottrarre i valori .scrollTop() e .scrollLeft() per tenere conto della posizione di scorrimento.

Ecco un estratto dal documento: metodo di

Il .Offset() ci permette di recuperare la posizione corrente di un elemento rispetto al documento. Contrastare questo con .position(), che recupera la posizione corrente relativa all'offset parent. Quando si posiziona un nuovo elemento sopra uno esistente per la manipolazione globale (in particolare, per implementare il trascinamento della selezione), .offset() è il più utile.

Per combinare questi:

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

Si può provare qui (scorrere per vedere il cambiamento di numeri): http://jsfiddle.net/jfriend00/hxRPQ/

Answer 2

Per le coordinate assolute di qualsiasi elemento jQuery ho scritto questa funzione, probabilmente non funziona per tutti i tipi di posizioni css ma forse è un buon inizio per qualcuno ..

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