使用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;