Javascript 基于背景色滚动时更改SVG填充

我正在建立一个

React

网站，该网站有

部分

面板，在滚动时使用

位置：sticky

，但有

固定

元素及其

颜色

与

部分

背景色相适应的问题

下面是这个问题的一个简单片段

html{
字体系列：无衬线；
字体大小：20px；
字号：700；
文本转换：大写；
}
*,
：：之后，
：：之前{
框大小：边框框；
}
身体{
保证金：0；
溢出x：隐藏；
}
.导航{
位置：固定；
宽度：100；
排名：0；
左：0；
右：0；
填充：24px 28px；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
svg{
填充：黑色；//在深色背景上改为白色
}
.粘的{
高度：100vh；
宽度：100vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
位置：粘性；
顶部：-1px；
}
.黑暗{
背景色：#1E；
颜色：#fff；
}

剖面灯
暗部

我们可以使用intersectionObserver来告诉我们新的部分何时接近视口顶部，并相应地更改菜单图标的颜色。相反，当一个部分靠近顶部时，根据其前一个兄弟元素（即下面的元素）的黑暗状态更改菜单

这个片段演示了：

const svg=document.querySelector（'svg'）；
让回调=（条目，观察者）=>{
entries.forEach（entry=>{
//MDN中的列表：
//每个条目描述了一个观察到的交叉点的变化
//目标要素：
//entry.boundingClientRect
//入口.交叉比
//entry.intersectionRect
//entry.isIntersecting
//entry.rootBounds
//进入目标
//进场时间
//最终使所选的渐变取决于重叠的百分比和上一个同级元素的颜色
if（输入。isIntersecting）{
svg.style.fill=（entry.target.classList.contains（'dark'））？'url（#白色）'url（#黑色）'；
}
否则{
svg.style.fill=（entry.target.previousElementSibling.classList.contains（'dark'）？'url（#white）''url（#black'）；
}
});
};
让选项={
阈值：[0.9,0.94,0.98]//需要处理这些阈值
}
让observer=新的IntersectionObserver（回调，选项）；
const stickies=document.queryselectoral（'main div.stickies'）；
粘性。forEach（粘性=>{
观察者，观察者（粘性）；
});
html{
字体系列：无衬线；
字体大小：20px；
字号：700；
文本转换：大写；
}
*,
：：之后，
：：之前{
框大小：边框框；
}
身体{
保证金：0；
溢出x：隐藏；
}
.导航{
位置：固定；
宽度：100；
排名：0；
左：0；
右：0；
加：24px 28px；
填充：2vh 28px；
rp0；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
z指数：999；
}
svg{
填充：黑色；
}
.粘的{
高度：100vh；
宽度：100vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
位置：粘性；
顶部：-1px；
背景色：白色；
}
.黑暗{
背景色：#1E；
颜色：#fff；
}

第一节灯光
第二节黑暗
第三节灯光
第四节灯光
第五节灯光
第6节黑暗
当深色部分或浅色部分移动到条上时，是否希望条逐个改变颜色？我还认为您需要几行JavaScript，可以吗？@AHaworth。我希望颜色能一个一个地改变。我正在考虑在SVG上使用clippath。第二，JS还可以。嗨，当我意识到我不明白如何用两个以上的部分来组织事情时，我正在部分地输入答案（推荐使用intersectionObserver）。你可以添加一对，展示一下它们的样式吗？当我这样做并向上滚动时，它看起来很奇怪，有点重叠。谢谢你，阿哈沃思。非常感谢。是的，这就是目的。各部分重叠。实际上，我认为最好的解决方案是在每个部分中添加菜单，传递背景色，然后使用
色度
确定颜色是否为深色。但是，在这种情况下，我会让每个图标重叠，因为位置是粘性的，我无法隐藏溢出。嗨，复制菜单会导致可访问性问题吗？不过我觉得没必要。我对奇怪的重叠感到困惑的是，灯光部分没有背景——我改变了它，使它们变成白色，我想这就是我的意图。