Jak znaleźć bezwzględną pozycję elementu za pomocą jQuery?

398

Czy istnieje sposób znalezienia bezwzględnej pozycji elementu, tj. Względem początku okna, za pomocą jQuery?

javascript jquery akshat
źródło

Odpowiedzi:

650

.offset() zwróci pozycję przesunięcia elementu jako prosty obiekt, np .:

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

Możesz użyć tej wartości zwracanej, aby ustawić inne elementy w tym samym miejscu:

$(anotherElement).css(position)
Półksiężyc Świeży
źródło
90
Zawsze zapominam o tym i znajduję twój post ponownie, gdy google: p
Aren
16
Nie zawsze wydaje się to zwracać pozycję absolutną z powodu różnic w granicach itp.
Tom
8
Używam chrome i offset()nie zwraca właściwej górnej współrzędnej. Zamiast tego zwraca około 300 pikseli więcej niż górna współrzędna elementu w dokumencie. Dlaczego??
SoLoGHoST
1
chrome, FF i IE dają różne wyniki :(
Rizwan Mumtaz,
3
@Aren Zawsze zapominam o tym i za każdym razem uważam twój komentarz za zabawny :)
Alex
197

Zauważ, że $(element).offset()informuje o pozycji elementu względem dokumentu . Działa to świetnie w większości przypadków, ale w przypadku position:fixedmożesz uzyskać nieoczekiwane rezultaty.

Jeśli twój dokument jest dłuższy niż rzutnia i przewinąłeś pionowo w kierunku dolnej części dokumentu, wówczas wartość position:fixedelementu będzie większa niż wartość oczekiwana o przewiniętą wartość.offset()

Jeśli szukasz wartości względem rzutni (okna), a nie dokumentu na pozycji: element stały, możesz odjąć wartość dokumentu scrollTop()od wartości elementu stałego offset().top. Przykład:$("#el").offset().top - $(document).scrollTop()

Jeśli position:fixednadrzędnym elementem odsuniętym jest dokument , parseInt($.css('top'))zamiast tego chcesz przeczytać .

Tom Auger
źródło
8
Właśnie tego szukałem! Dla nooba takiego jak ja: wartość do odjęcia to$(document).scrollTop()
Dr. Gianluigi Zane Zanettini
3
Niesamowite! To powinna być najlepsza odpowiedź!
Shivanshu Goyal,