Javascript 要在导航栏到达另一个具有不同背景的部分时更改其字体颜色吗

我的问题是这个。我有一个固定的导航栏，我必须根据它下面部分的背景更改列表字体的颜色。例如，当我向下滚动到背景颜色为黑色的第二部分时，第一部分背景为黑色，导航栏字体颜色为白色。导航栏字体颜色变为黑色。 这是密码

功能视差（元素、距离、速度）{
const item=document.querySelector（元素）；
item.style.transform=`translateY（${distance*speed}px）`；
}
addEventListener（“滚动”，函数（）{
视差（“.video”，窗口滚动，1）；
});
var vid=document.getElementById（“specsVid”）；
视频回放率=1.7
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景：黑色；
字体系列：“Poppins”，无衬线；
}
部分{
高度：100vh；
}
.网页短片{
高度：80vh；
位置：绝对位置；
底部：0vh；
左：30vh；
z指数：-3；
}
导航{
位置：固定；
z指数：1；
}
李{
显示：内联块；
}
导航a{
颜色：白色；
文字装饰：无；
字体大小：1.4rem；
左边距：10vh；
位置：相对位置；
顶部：5vh；
左：55vh；
}
导航a：悬停{
不透明度：0.8；
}
视频：：-webkit媒体控件{
显示：无；
}
.规格{
背景：白色；
}
.specsVid{
高度：80vh；
宽度：90%；
位置：相对位置；
最高：20%；
左：5%；
}

mohamed amine wannes项目












您可以根据通过JS偏移到视口的部分来设置类的样式：


document.onscroll=function（）{
const specs=document.querySelector（“#specs”）；
const nav=document.querySelector（'nav'）；
如果（specs.getBoundingClientRect（）.top），这能回答您的问题吗？没问题！在这种情况下，请将您的问题标记为已解决@MEMER