Javascript 有没有办法确定顶部的像素？

我需要更多的解释，但欢迎举例说明。
当我向下滚动时，屏幕上的某个特定元素将在滚动时淡入。我正在尝试这样做。
唯一的问题是，我需要一种方法，使用提供的代码（或更好的方法）来确定元素从顶部向下的距离。
有没有其他方法可以使滚动效果工作，而不必从顶部以像素单位为基础？
如果没有，您如何找到距离？
这是我一直在使用的代码

if (window.scrollY>300)

---

下面是一个使用

const inViewport=（条目，观察者）=>{
entries.forEach（entry=>{
entry.target.classList.toggle（“active”，entry.isIntersecting）；
});
};
让观察者=新的相交观察者（inViewport）；
observer.observe（document.querySelector（“#box”）
body{高度：300vh；}
#框{宽度：100px；高度：100px；位置：绝对；顶部：150vh；背景：红色；}
/*InViewport转换*/
[data inviewport=“淡入淡出旋转”]{/*默认状态*/
过渡：2s；
不透明度：0.1；
}
[data inviewport=“fade rotate”].活动{/*活动状态*/
变换：旋转（180度）；
不透明度：1；
}
向下滚动。。。
当元素进入页面底部时将触发：

if（element.getBoundingClientRect（）.top）这是否回答了您的问题？或者可能是元素.getBoundingClientRect（）的问题方法返回元素的大小及其相对于视口的位置。感谢您提供的链接和代码。我不太理解您的代码的含义，但我会从链接中读取信息，并在可能的情况下引用。再次感谢您！！！！@A.D.Schmidt观察员只是在某些边界内观察元素（在上述情况下，它是视口，但如果需要，您可以添加另一个元素，请参阅文档或如何添加更多选项）。上述操作基本上使用
条目。isIntersecting
布尔值-在观察到的元素（
条目.目标
）上切换类
“活动”
。其余由CSS处理。