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