Javascript 滚动事件触发太早

我在我的网站上有两个固定的标题；其中一个正在被另一个覆盖-除非您一直滚动到彩色部分，在该部分，顶部的一个应该被剪裁，并显示底部的一个：

let invertedNavbar=document.querySelector（'.navbar--inverted'），
navbarHeight=InversedNavBar.scrollHeight，
元素=document.querySelector（'.color节'）
函数相交检查器（e）{
让elementPosition=element.getBoundingClientRect（）
if（elementPosition.bottom0）{
invertedNavbar.style.clipPath='多边形（0%1000px，100%1000px，100%'+元素位置.bottom+'px，0%'+元素位置.bottom+'px）'
}
if（elementPosition.top>0&&elementPosition.topnavbarHeight）{
invertedNavbar.style.clipPath='多边形（0%-10px，0%-10px，0%-20px，0%-20px）'
}
}
相交检查器（）
window.addEventListener（'scroll'，intersectionChecker）

*{
保证金：0；
}
navbar先生{
背景色：红色；
高度：30px；
宽度：100%；
位置：固定；
顶部：0；左侧：0；
}
.导航条-反转{
背景颜色：蓝色；
}
.垫片{
高度：100vh；
}
.颜色部分{
背景颜色：橙色；
高度：300px；
}

---

事实上，我们被这个问题误导了，以为问题来自事件发生的那一刻，而不是。。这只是你身体状况的问题！剪辑中剩余的部分是因为，例如，当滚动达到0时，由于严格的

比较，没有触发样式更改

不知道它们是否都是必需的，但将它们更改为

=

和

navbarHeight）{
invertedNavbar.style.clipPath=“”
}否则{
if（elementPosition.bottom=0）{
invertedNavbar.style.clipPath='多边形（0%1000px，100%1000px，100%'+元素位置.bottom+'px，0%'+元素位置.bottom+'px）'
}
如果（elementPosition.top>=0&&elementPosition.top“工作得很好”->如果你不想批评，当你滚动得很快时，它就没有那么好了。另外，你所说的“滚动出部分”到底是什么意思？@Kaddath你的意思是它落后了？这很可能是因为这只是一个最小的测试用例，没有延迟等等，我在我的实际代码中有。滚动出部分的意思是当导航栏停止与彩色部分相交时。你为什么调用你的函数
intersectionChecker（）
不，我的意思是，当我快速上下滚动时，标题总是红色的，或者蓝色的结尾几乎完全被红色的覆盖（这里是windows上的Firefox）@Kaddath这正是我的问题