development

jQuery를 사용하여 요소의 상단에서 수직 거리를 픽셀 단위로 찾는 방법

big-blog 2020. 10. 15. 08:03
반응형

jQuery를 사용하여 요소의 상단에서 수직 거리를 픽셀 단위로 찾는 방법


javascript / jQuery를 사용하여 페이지 상단에서 DOM에서 요소가있는 위치까지의 수직 거리를 어떻게 찾습니까?

나는 뭔가

<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으로 온다!


.offset()요소와 문서 상단 사이의 거리를 가져 오는 데 사용 합니다.

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

Rob W의 대답이 맞습니다. 그러면 전체 페이지 상단에서 오프셋을 얻을 수 있습니다.

볼 수있는 화면 상단에서 오프셋을 얻으려면 다음을 수행해야합니다.

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

도움이 되었기를 바랍니다.


내가 아는 .offset()한 현재 스크롤 위치와 문서 상단 사이의 거리를 얻습니다.

이것을 사용해야합니다 : $("li.test").position().top


$ (element) .offset (). top을 사용하고 페이지에있는 기존 고정 요소의 높이를 추가하여 더 정확하게 만듭니다.

참고 URL : https://stackoverflow.com/questions/7778580/how-to-find-the-vertical-distance-from-top-in-px-of-an-element-using-jquery

반응형