Question

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

Answer 1

您可以使用.offset()获取与document元素相比的偏移量，然后使用scrollTop元素的window属性来查找页面下方的距离用户已滚动：

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

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

以下是演示：http://jsfiddle.net/Rxs2m/

请注意，负值表示该元素位于顶部折叠之上。

Answer 2

香草：

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

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

   console.log(distanceToTop);
});

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

Answer 3

这可以通过JavaScript 纯粹实现。

我在lynx对问题的评论中已经回答了我想写的答案。

但我还是会写回答，因为就像我一样，人们有时会忘记阅读评论。

因此，如果您只想从屏幕顶部获取元素的距离（以像素为单位），则需要执行以下操作：

// Fetch the element
var el = document.getElementById("someElement");

使用getBoundingClientRect()

// Use the 'top' property of 'getBoundingClientRect()' to get the distance from top
var distanceFromTop = el.getBoundingClientRect().top;

多数民众赞成！

希望这有助于某人：）

Answer 4

我用过这个：

service

代码：

                              myElement = document.getElemenById("xyz");
Get_Offset_From_Start       ( myElement );  // returns positions from website's start position
Get_Offset_From_CurrentView ( myElement );  // returns positions from current scrolled view's TOP and LEFT

Answer 5

我使用此功能来检测元素是否在视口中可见

代码：

const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
$(window).scroll(function(){
var scrollTop     = $(window).scrollTop(),
elementOffset = $('.for-scroll').offset().top,
distance      = (elementOffset - scrollTop);
if(distance < vh){
    console.log('in view');
}
else{
    console.log('not in view');
}
});

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

5 个答案: