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

Me pregunto cómo puedo obtener la cantidad de píxeles (o medidas 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í: ¿Es posible obtener la posición de div dentro de la ventana del navegador? No dentro del documento. Dentro de la ventana, pero al menos en Safari, me encuentro con un problema en el que devuelve el mismo número sin importar dónde estén realmente los div.

¡Gracias por cualquier ayuda!

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

De este página MDN:

El valor devuelto es un objeto TextRectangle, que contiene propiedades izquierda, superior, derecha e inferior de solo lectura que describen el cuadro de borde, en píxeles, con la parte superior izquierda en relación con la parte superior izquierda de la ventana gráfica.

Lo usas así:

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

//Primero obtenga 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 atajo

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

Vea 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, están los DesplazamientoDesplazamiento() funciones No estoy lo suficientemente familiarizado con JQuery para indicarle la página correcta del manual, pero aquí hay una pregunta que parece ir en la dirección correcta.

He esquilado 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 te puede ayudar ^^

Esta respuesta le dice cómo obtener las coordenadas x e y de un elemento con respecto al origen (arriba a la izquierda) de un documento. Solo necesita agregar el valor .scrollTop a la coord y para obtener la distancia en píxeles desde div hasta la parte superior de la ventana gráfica.