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

Question

如下图所示。

黑框是屏幕尺寸，即视口。 红色虚线框是整个页面的大小，该页面已滚动到视口之外。 绿色的虚线框是li元素。 现在，我要计算特定li和视口顶部边缘之间的距离，用红色箭头表示。

我可以使用jQuery解决方案。

Answer 1

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

Answer 2

jQuery也很容易：

演示

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

两全其美 ：

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