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