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

Question

我比任何事情都需要更多的解释，但欢迎举例说明。
我试图使它，所以当我向下滚动时，屏幕上的特定元素将在滚动时淡入。
唯一的问题是，我需要一种方法来确定元素从顶部到下有多远，使用提供的代码（或者更好的方法）。
有没有一种不同的方法可以使滚动效果工作，而不必从顶部的像素单位开始？
如果没有，你怎么能找到距离？
这是我一直在使用的代码。

if (window.scrollY>300)

Answer 1

下面是使用交集观察者 API&nbsp;的简单示例const inViewport = (entries, observer) => {&nbsp; entries.forEach(entry => {&nbsp; &nbsp; entry.target.classList.toggle("active", entry.isIntersecting);&nbsp; });};let observer = new IntersectionObserver(inViewport);observer.observe(document.querySelector('#box'));body { height:300vh; }#box { width:100px; height:100px; position:absolute; top:150vh; background:red; }/* InViewport transitions */[data-inviewport="fade-rotate"] { /* Default state */&nbsp; transition: 2s;&nbsp; opacity: 0.1;}[data-inviewport="fade-rotate"].active { /* Active state */&nbsp; transform: rotate(180deg);&nbsp; opacity: 1;}Scroll down...<div id="box" data-inviewport="fade-rotate"></div>

Answer 2

当元素进入页面底部时，将触发此操作：if(element.getBoundingClientRect().top <= window.innerHeight)当元素丰富屏幕中间时，将触发if(element.getBoundingClientRect().top <= window.innerHeight / 2)当然，所有事件都应该在窗口事件上onscroll