Conseguir posición absoluta de un elemento con respecto al navegador

Question

Tengo un conjunto div al flotador clase CSS con el ser float:

.float { 
display:block; 
position:fixed; 
top: 20px; 
left: 0px; 
z-index: 1999999999; 
} 
* html .float {position:absolute;} 

Esta clase hace que el elemento de permanecer en una posición fija en la página (el * parte html es hacer que funcione en IE). Estoy usando javascript para cambiar la posición del elemento horizontal y verticalmente.

Necesito obtener la posición absoluta de div en relación con la ventana del navegador en javascript (cuántos píxeles de la parte superior e izquierda de la ventana del navegador es el div). En este momento, estoy usando la siguiente:

pos_left = document.getElementById('container').offsetLeft; 
pos_top = document.getElementById('container').offsetTop; 

El código anterior funciona para IE, Chrome, y FF, pero en Opera devuelve 0 para ambos. Necesito una solución que funcione para todos esos navegadores. ¿Algunas ideas?

Btw: Es posible mantener el seguimiento de los cambios realizados por javascript, pero esa no es la solución que estoy buscando por motivos de rendimiento. Además, soy no usando jquery.

Answer 1

Si puede usar elemento de estilo de elementos;

<div id="container" style="top: 20px;left: 0px;z-index: 1999999999;"> 

Puede obtenerlo con el atributo de estilo de elemento;

var top = parseInt(document.getElementById('container').style.top.split('px')[0], 10); // This row returns 20 

Puede utilizar superior, izquierda, anchura, altura, etc ...

Answer 2

Es posible encontrar pistas aquí: http://code.google.com/p/doctype/wiki/ArticlePageOffset pero creo que tendrá que añadir las compensaciones de los padres a tener el valor correcto

Answer 3

He tenido una pregunta similar antes, y mirando a través de los blogs, los sitios web y esta solución de stackoverflow, ¡me he dado cuenta de que no se puede encontrar una solución única para todos! Entonces, sin más preámbulos, esto es lo que he reunido que obtiene la x, y de cualquier elemento a través de cualquier nodo padre, incluidos iframes, divs de desplazamiento y lo que sea. Aquí ya go:

function findPos(obj) { 
    var curleft = 0; 
    var curtop = 0; 
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft); 
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop); 
    if(obj.scrollTop && obj.scrollTop > 0) curtop -= parseInt(obj.scrollTop); 
    if(obj.offsetParent) { 
     var pos = findPos(obj.offsetParent); 
     curleft += pos[0]; 
     curtop += pos[1]; 
    } else if(obj.ownerDocument) { 
     var thewindow = obj.ownerDocument.defaultView; 
     if(!thewindow && obj.ownerDocument.parentWindow) 
      thewindow = obj.ownerDocument.parentWindow; 
     if(thewindow) { 
      if(thewindow.frameElement) { 
       var pos = findPos(thewindow.frameElement); 
       curleft += pos[0]; 
       curtop += pos[1]; 
      } 
     } 
    } 

    return [curleft,curtop]; 
} 

Answer 4

lo uso para PhantomJS rasterización:

function getClipRect(obj) { 
    if (typeof obj === 'string') 
    obj = document.querySelector(obj); 

    var curleft = 0; 
    var curtop = 0; 

    var findPos = function(obj) { 
    curleft += obj.offsetLeft; 
    curtop += obj.offsetTop; 
    if(obj.offsetParent) { 
     findPos(obj.offsetParent); 
    } 
    } 
    findPos(obj); 

    return { 
    top: curtop, 
    left: curleft, 
    width: obj.offsetWidth, 
    height: obj.offsetHeight 
    }; 
} 

Answer 5

Una variación en la respuesta de user1988451 que he probado varios navegadores. Encontré que su respuesta no abordaba el ancho de desplazamiento (así que agregué el cheque para obj.scrollLeft), y me comporté de manera diferente en FF y Chrome hasta que agregué las comprobaciones para thewindow.scrollY y thewindow.scrollX. Probado en Chrome, IE, Safari, Opera, FF, IE 9-10 e IE9 con 8 y 7 modos. Tenga en cuenta que no he probado su comportamiento con los marcos flotantes:

function findPos(obj, foundScrollLeft, foundScrollTop) { 
    var curleft = 0; 
    var curtop = 0; 
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft); 
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop); 
    if(obj.scrollTop && obj.scrollTop > 0) { 
     curtop -= parseInt(obj.scrollTop); 
     foundScrollTop = true; 
    } 
    if(obj.scrollLeft && obj.scrollLeft > 0) { 
     curleft -= parseInt(obj.scrollLeft); 
     foundScrollLeft = true; 
    } 
    if(obj.offsetParent) { 
     var pos = findPos(obj.offsetParent, foundScrollLeft, foundScrollTop); 
     curleft += pos[0]; 
     curtop += pos[1]; 
    } else if(obj.ownerDocument) { 
     var thewindow = obj.ownerDocument.defaultView; 
     if(!thewindow && obj.ownerDocument.parentWindow) 
      thewindow = obj.ownerDocument.parentWindow; 
     if(thewindow) { 
      if (!foundScrollTop && thewindow.scrollY && thewindow.scrollY > 0) curtop -= parseInt(thewindow.scrollY); 
      if (!foundScrollLeft && thewindow.scrollX && thewindow.scrollX > 0) curleft -= parseInt(thewindow.scrollX); 
      if(thewindow.frameElement) { 
       var pos = findPos(thewindow.frameElement); 
       curleft += pos[0]; 
       curtop += pos[1]; 
      } 
     } 
    } 

    return [curleft,curtop]; 
}