Posición de Div en relación con la parte superior de la ventana gráfica

Question

Me pregunto cómo puedo obtener la cantidad de píxeles (o medición en general) desde un div hasta la parte superior de la ventana en Javascript. No estoy buscando un desplazamiento y en relación con el documento, simplemente en la parte superior de donde se muestra el navegador. Probé la solución "respondida" aquí: Is it possible to get the position of div within the browser viewport? Not within the document. Within the window, pero al menos en Safari, me estoy encontrando con un problema en el que se devuelve el mismo número sin importar dónde están realmente los div.

¡Gracias por cualquier ayuda!

Answer 1

Las respuestas existentes ahora están desactualizadas. El método getBoundingClientRect() ha existido desde hace bastante tiempo y hace exactamente lo que esta pregunta requiere. Además, es compatible con todos los navegadores.

De this página MDN:

El valor devuelto es un objeto TextRectangle, que contiene sólo lectura izquierda, superior, describiendo derecho y propiedades inferiores de la caja de frontera, en píxeles, con el parte superior izquierda relativa a la parte superior izquierda de la ventana gráfica.

que lo utilice de esta manera:

var viewportOffset = el.getBoundingClientRect(); 
// these are relative to the viewport 
var top = viewportOffset.top; 
var left = viewportOffset.left; 

Answer 2

Eche un vistazo a lo que JS Frameworks tiene para ofrecer. En su mayoría, han resuelto todos, o al menos la mayoría, de los problemas y especialidades específicos del navegador.

En Prototype, existen las funciones scrollOffset(). No estoy lo suficientemente familiarizado con JQuery para indicarle la página de manual correcta, pero here es una pregunta que parece ir en la dirección correcta.

Answer 3

Este answer le indica cómo obtener las coordenadas xey de un elemento con respecto al origen (arriba a la izquierda) de un documento. Solo necesita agregar el valor .scrollTop a la coord de y para obtener la distancia en píxeles de div a la parte superior de la ventana gráfica.

Answer 4

He shearshed un poco y encontré esto:

function getOffsetPosition(el_id, side){ 
element = document.getElementById(el_id); 

newNode = document.createElement("div"); 
newNode.innerHTML = "<div style=\"height: 12px;\"></div>"; 
element.insertBefore(newNode, element.firstChild); 

iVal = 0; 
oObj = element; 
var sType = "oObj.offset"+side; 
while (oObj && oObj.tagName != "html") { 
iVal += eval(sType); 
oObj = oObj.offsetParent; 
} 
element.removeChild(newNode); 
return iVal; 
} 

Si eso puede ayudarle a ^^

Answer 5

// En primer lugar obtener la geometría correcta para el navegador

(function(){ 
Run= window.Run || {}; 
if(window.pageYOffset!= undefined){ 
    Run.topLeftScroll= function(hoo){ 
    var wo= [window.pageXOffset, window.pageYOffset] 
    if(hoo && hoo.nodeType== 1){ 
    hoo= mr(hoo); 
    var T= 0, L= 0; 
    while(hoo){ 
    L+= hoo.offsetLeft; 
    T+= hoo.offsetTop; 
    hoo= hoo.offsetParent; 
    } 
    wo= [L, T, wo[0], wo[1]]; 
    } 
    return wo; 
    } 
} 
else if(document.body.scrollTop!== undefined){ 
    Run.topLeftScroll= function(hoo){ 
    var B= document.body; 
    var D= document.documentElement; 
    D= (D.clientHeight)? D: B; 
    wo= [D.scrollLeft, D.scrollTop]; 
    if(hoo && hoo.nodeType== 1){ 
    hoo= mr(hoo); 
    var T= 0, L= 0; 
    while(hoo){ 
    L+= hoo.offsetLeft; 
    T+= hoo.offsetTop; 
    hoo= hoo.offsetParent; 
    } 
    wo= [L, T, wo[0], wo[1]]; 
    } 
    return wo; 
    } 
} 
})() 

// función de acceso directo

if(window.Run && Run.topLeftScroll){ 
Run.getPosition= function(who, wch){ 
    var A= Run.topLeftScroll(who); 
    if(!wch) return A; 
    switch(wch.toUpperCase()){ 
    case 'X': return A[0];// element Left in document 
    case 'Y': return A[1];// element Top in document 
    case 'L': return A[0]-A[2];// Left minus scroll 
    case 'T': return A[1]-A[3];// Top minus scroll 
    case 'SL': return A[2];// scroll Left 
    case 'ST': return A[3];// scroll Top 
    default: return 0; 
    } 
    // all returns are integers (pixels) 
} 
}