使用 javascript 确定从 div 顶部到窗口顶部的距离

javascript jquery

2022-08-30 03:01:49

如何确定 div 最顶部与当前屏幕顶部之间的距离？我只想要到当前屏幕顶部的像素距离，而不是文档的顶部。我已经尝试过一些像和这样的东西，但我只是无法将我的大脑包裹起来。谢谢！.offset().offsetHeight

答案 1

您可以使用来获取与元素相比的偏移量，然后使用元素的属性来查找用户在页面向下滚动的程度：.offset()documentscrollTopwindow

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

该变量现在保持与元素顶部和顶部折叠的距离。distance#my-element

这是一个演示：http://jsfiddle.net/Rxs2m/

请注意，负值表示元素高于首折。

答案 2

香草：

window.addEventListener('scroll', function(ev) {

   var someDiv = document.getElementById('someDiv');
   var distanceToTop = someDiv.getBoundingClientRect().top;

   console.log(distanceToTop);
});

打开浏览器控制台并滚动页面以查看距离。