¿Cómo encuentro la posición absoluta de un elemento usando jQuery?

399

¿Hay alguna manera de encontrar la posición absoluta de un elemento, es decir, en relación con el inicio de la ventana, usando jQuery?

javascript jquery

— akshat
fuente

Respuestas:

652

.offset() devolverá la posición de desplazamiento de un elemento como un objeto simple, por ejemplo:

var position = $(element).offset(); // position = { left: 42, top: 567 }

Puede usar este valor de retorno para colocar otros elementos en el mismo lugar:

$(anotherElement).css(position)

— Creciente Fresco
fuente

Siempre me olvido de este, y encuentro tu publicación nuevamente cuando busco en Google: p

— Aren

Esto no siempre parece devolver la posición absoluta debido a las diferencias en las fronteras, etc.

— Tom

Estoy usando Chrome y offset()no devuelve la coordenada superior adecuada. En su lugar, devuelve aproximadamente 300 píxeles más que la coordenada superior del elemento en el documento. ¿¿Por qué??

— SoLoGHoST

Chrome, FF e IE están dando resultados diferentes :(

— Rizwan Mumtaz

@Aren Siempre olvido este y encuentro tu comentario divertido cada vez :)

— Alex

198

Tenga en $(element).offset()cuenta que le indica la posición de un elemento en relación con el documento . Esto funciona muy bien en la mayoría de las circunstancias, pero en el caso de position:fixedque pueda obtener resultados inesperados.

Si su documento es más largo que la ventana gráfica y se ha desplazado verticalmente hacia la parte inferior del documento, position:fixedel offset()valor de su elemento será mayor que el valor esperado en la cantidad que ha desplazado.

Si está buscando un valor relativo a la ventana gráfica (ventana), en lugar del documento en una posición: elemento fijo, puede restar el scrollTop()valor del documento del valor del elemento fijo offset().top. Ejemplo:$("#el").offset().top - $(document).scrollTop()

Si el position:fixedelemento primario desplazado del elemento es el documento , desea leer en su parseInt($.css('top'))lugar.

— Tom Auger
fuente

¡Estaba buscando exactamente esto! Para los novatos como yo: el valor a restar es$(document).scrollTop()

— Dr. Gianluigi Zane Zanettini

¡Increíble! ¡Esta debería ser la mejor respuesta!

— Shivanshu Goyal