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

如何确定div顶部到当前屏幕顶部之间的距离？我只想要到当前屏幕顶部的像素距离，而不是文档顶部的像素距离。我试过一些方法，比如

.offset（）

和

.offsetHeight

，但我就是无法用脑子去思考。谢谢

您可以使用

.offset（）

获取与

文档

元素相比的偏移量，然后使用

窗口

元素的

scrollTop

属性查找用户已向下滚动页面的距离：

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

distance

变量现在保存从

#my元素

顶部到顶部折叠的距离

下面是一个演示：

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

我使用了以下方法：

                              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

代码：

香草的：

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

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

   console.log(distanceToTop);
});

---

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

这可以通过纯JavaScript实现

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

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

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

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

使用

就这样

---

希望这对某人有所帮助：）

我使用这个函数来检测元素在视图端口中是否可见

代码：

const vh=Math.max（document.documentElement.clientHeight | 0，window.innerHeight | 0）；
$（窗口）。滚动（函数（）{
var scrollTop=$（窗口）.scrollTop（），
elementOffset=$（'.for scroll'）.offset（）.top，
距离=（elementOffset-scrollTop）；
中频（距离

您可能需要

el.getBoundingClientRect（）.top+窗口。滚动
@caub-Eh，它只是
el.getBoundingClientRect（）.top
。添加滚动位置会增加到文档顶部的距离。是的，我只是想取消对GetBoundingClient（）不起作用的质疑。getBoundingClientRect（）@Elnoor谢谢你的建议：）我已经做了适当的修改。非常棒的工作@MohammedFurqanRahamathM。非常感谢您的回答：）它像一个符咒一样有效！！：）@谢谢你。我很高兴它是有帮助的：但是，如果你没有在页面中间重新加载，这只会起作用，如果用户没有滚动页面，这只会起作用。否则返回的
distanceToTop
是相对的（如果用户滚动过去，甚至可以是负数）。要考虑到这一点，请使用
window.pageYOffset+someDiv.getBoundingClientRect（）.top
@ty OP查找的是到屏幕顶部的距离，而不是到文档顶部的距离-在这种情况下，负值是有效的这也是我需要的。我使用的是Vue toasted库，它只允许在屏幕上的绝对位置显示烤面包。我希望toast显示在我在表中单击的按钮附近，最终需要在滚动事件中使用getBoundingClientRect（）.top。我在一次调整大小的活动中也做了同样的事情。可能想考虑在计算像这样的屏幕顶部时的距离-永远不知道客户端会做什么。+ 1用于显示元素。OffStToT存在。element.getBoundingClientRect（）.top给了我奇怪的行为。我想知道从网页顶部到元素顶部的距离。如何检查距离是否是一个特定的数字？我想让一个元素粘在一起，如果它离top@ThessaVerbruggen您可以检查
distance
变量，查看其值是否为
120
，但我建议检查范围而不是确切的数字。例如，如果你用鼠标滚轮滚动，你很可能跳过120。因此，如果您试图在元素位于顶部折叠的120px范围内时应用一些CSS或其他内容，那么可以使用
if（distance<120）{/*do something*/}
。这里有一个更新的演示：如果我这样做，一个问题是：当我滚动时，粘性部分会闪烁。我猜是因为当我滚动时它会重新计算。你知道怎么解决这个问题吗？我的代码：$（window）.on（'scroll'，function（）{var scrollTop=$（window）.scrollTop（），elementOffset=$（'secondary'）.offset（）.top，distance=（elementOffset-scrollTop）；if（distance<120）{$（'secondary'）.addClass（'sticky'）；}else{$（'secondary'）.removeClass（'sticky'））; 			    } 			});
// Fetch the element
var el = document.getElementById("someElement");  

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

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');
}
});