使用JavaScript计算li元素和视口之间的距离

Question

As shown in figure below...

Black box is the screen size, the viewport. The red dotted box is the size of the entire page, which has been scrolled out of the viewport. The green dotted boxes are li elements. Now I want to calculate the distance between a specific li and the top edge of the viewport, represented by the red arrow.

I'm okay with a jQuery solution.

Answer 1

var distanceToTop = document.querySelector("#your-li").getBoundingClientRect().top

Answer 2

Quite easy with jQuery too :

Demo

$('#element').offset().top-$(window).scrollTop();

Best of both worlds :

$('#element')[0].getBoundingClientRect().top;