Bagaimana cara menemukan posisi absolut suatu elemen menggunakan jQuery?

399

Apakah ada cara untuk menemukan posisi absolut dari suatu elemen, yaitu relatif terhadap awal jendela, menggunakan jQuery?

javascript jquery

— akshat
sumber

Jawaban:

652

.offset() akan mengembalikan posisi ofset elemen sebagai objek sederhana, misalnya:

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

Anda dapat menggunakan nilai pengembalian ini untuk memposisikan elemen lain di tempat yang sama:

$(anotherElement).css(position)

— Crescent Fresh
sumber

Saya selalu lupa yang ini, dan menemukan posting Anda lagi ketika saya google: p

— Aren

Ini sepertinya tidak selalu mengembalikan posisi absolut karena perbedaan perbatasan dll.

— Tom

Saya menggunakan chrome dan offset()tidak mengembalikan koordinat atas yang tepat. Ini mengembalikan sekitar 300 piksel lebih dari koordinat atas elemen dalam dokumen. Mengapa??

— SoLoGHoST

chrome, FF dan IE memberikan hasil yang berbeda :(

— Rizwan Mumtaz

@Aren saya selalu lupa yang ini dan menemukan komentar Anda lucu setiap kali :)

— Alex

198

Catatan yang $(element).offset()memberi tahu Anda posisi elemen relatif terhadap dokumen . Ini berfungsi baik di sebagian besar keadaan, tetapi jika position:fixedAnda bisa mendapatkan hasil yang tidak terduga.

Jika dokumen Anda lebih panjang dari viewport dan Anda telah menggulir secara vertikal ke bagian bawah dokumen, maka nilai position:fixedelemen Anda akan lebih besar dari nilai yang diharapkan dengan jumlah yang telah Anda gulir.offset()

Jika Anda mencari nilai relatif ke viewport (jendela), daripada dokumen pada posisi: elemen tetap, Anda dapat mengurangi nilai dokumen dari scrollTop()nilai elemen tetap offset().top. Contoh:$("#el").offset().top - $(document).scrollTop()

Jika position:fixedinduk offset elemen adalah dokumen , Anda ingin membacanya parseInt($.css('top')).

— Tom Auger
sumber

Aku sedang mencari ini! Bagi noob seperti saya: nilai yang harus dikurangi adalah$(document).scrollTop()

— Dr. Gianluigi Zane Zanettini

Luar biasa! Ini harus menjadi jawaban teratas!

— Shivanshu Goyal