Calculate distance between li element and viewport using JavaScript

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;