So ermitteln Sie mit jQuery den vertikalen Abstand von oben in px eines Elements

78

Wie finde ich mithilfe von Javascript / jQuery den vertikalen Abstand vom oberen Rand der Seite zu der Stelle, an der das Element im DOM vorhanden ist?

Ich habe so etwas wie

<ul>
    <li>one</li>
    <li>one</li>
    <li>one</li>
    <li>one</li>
    <li class="test">one</li>
    ....
    ....
    ....
    <li>one</li>
</ul>

Zum Beispiel möchte ich hier den vertikalen Abstand vom oberen Rand der Seite zum li#testElement ermitteln.

Ich habe es versucht, .scrollTop()aber es kommt immer als 0!

javascript jquery ptamzz
quelle
1
ist es das, wonach du suchst? var position = $ ('li # test'). position (); alert (position.top);
Jonas m

Antworten:

164

Verwenden Sie .offset()diese Option , um den Abstand zwischen einem Element und dem oberen Rand des Dokuments zu ermitteln:

$("li.test").offset().top
Rob W.
quelle
103

Die Antwort von Rob W ist richtig - das gibt Ihnen den Versatz vom oberen Rand der ganzen Seite.

Wenn Sie den Versatz vom oberen Rand des sichtbaren Bildschirms erhalten möchten, gehen Sie folgendermaßen vor:

var viewableOffset = $("#li.test").offset().top - $(window).scrollTop();

Hoffentlich hilft das!

der x Faktor
quelle
2
Haha danke. SO war schon immer ein nützlicher Erfolg bei Google-Suchanfragen, und ich war gelangweilt und dachte, ich würde einige Fragen beantworten. Ich trolle meistens hier herum, während ich auf eine Antwort auf der Schwesterseite von SO, ServerFault, warte. Ich bin ein langjähriger Programmierer und Neuling Admin. :)
thexfactor
1
Dies ist ein ausgezeichneter Code, wenn Sie die Position steuern: feste Elemente!
Starkers
3

Soweit ich weiß, .offset()erhalten Sie den Abstand zwischen der aktuellen Bildlaufposition und dem oberen Rand des Dokuments.

Sie müssen dies verwenden: $("li.test").position().top

Crisan Raluca Teodora
quelle
relativ zum offsetParent, der möglicherweise nicht der übergeordnete div
aaron
0

Verwenden Sie $ (element) .offset (). Top und fügen Sie die Höhe der vorhandenen festen Elemente auf der Seite hinzu, um die Genauigkeit zu erhöhen.

Rut Shah
quelle