як знайти вертикальну відстань від верху в px елемента за допомогою jQuery

78

Як знайти вертикальну відстань від верхньої частини сторінки до місця існування елемента в DOM за допомогою javascript / jQuery?

У мене щось на зразок

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

Наприклад, тут я хочу знайти вертикальну відстань від верхньої частини сторінки до li#testелемента.

Я намагався, .scrollTop()але це завжди приходить як 0!

javascript jquery

— ptamzz
джерело

1

це те, що ти шукаєш? var position = $ ('li # test'). position (); оповіщення (position.top);

— Jonas m

165

Використовуйте .offset()для отримання відстані між елементом і вершиною документа:

$("li.test").offset().top

— Роб В.
джерело

104

Відповідь Роб W вірна - це дасть вам зміщення у верхній частині повної сторінки.

Якщо ви хочете отримати зміщення у верхній частині екрана, що переглядається, вам слід зробити це:

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

Сподіваюся, це допоможе!

— X Factor
джерело

2

Ха-ха дякую. ТО завжди було корисним хітом у пошуках Google, і мені було нудно і я думав, що відповім на деякі запитання. Я переважно тролюю тут, чекаючи відповіді на сестринському сайті SO, ServerFault. Я давній програміст і новачок-адміністратор. :)

— thexfactor

1

Це чудовий біт коду, якщо ви керуєте позицією: фіксовані елементи!

— Starkers

3

Наскільки мені відомо, .offset()отримайте відстань між поточною позицією прокрутки та верхом документа.

Вам потрібно використовувати це: $("li.test").position().top

— Крісан Ралука Теодора
джерело

відносно offsetParent, який може не бути батьківським div

— aaron

0

Використовуйте $ (element) .offset (). Top та додайте до нього висоту існуючих фіксованих елементів на сторінці, щоб зробити її більш точною.

— рут шах
джерело