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

Question

如下图所示...

黑框是屏幕大小，视口。 红色虚线框是整个页面的大小，已经从视口中滚动出来。绿色虚线框是li元素。现在我想计算特定的li与视口顶边之间的距离，用红色箭头表示。

我很满意jQuery解决方案。

Answer 1

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

Answer 2

很容易使用jQuery太：

Demo

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

两全其美：

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