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
90
Saya selalu lupa yang ini, dan menemukan posting Anda lagi ketika saya google: p
Aren
16
Ini sepertinya tidak selalu mengembalikan posisi absolut karena perbedaan perbatasan dll.
Tom
8
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
1
chrome, FF dan IE memberikan hasil yang berbeda :(
Rizwan Mumtaz
3
@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
8
Aku sedang mencari ini! Bagi noob seperti saya: nilai yang harus dikurangi adalah$(document).scrollTop()
Dr. Gianluigi Zane Zanettini
3
Luar biasa! Ini harus menjadi jawaban teratas!
Shivanshu Goyal