Javascript ReactJS：根据顶栏后面的页面背景更改顶栏的颜色

我想知道如何解决这个问题：我有一个包含以下组件的react应用程序： -顶栏 -内容（本身包含不同的组件：topic1.js、topic2.js…） -页脚

顶部栏是“固定”的，您可以在页面顶部永久看到它（例如，在stackoverflow.com中）。不同的内容组件具有不同的背景颜色（让我们假设颜色为暗和亮）。现在，当我向下滚动页面时，我想根据其后面的当前颜色更改顶栏的颜色。 例如，顶栏位于具有深色的内容组件上方，它也应将其颜色更改为该深色。。因此，它将非常适合当前的内容。我添加了两张图片来说明我的意思（&）。您可以看到顶部栏包含指向不同主题的链接，并且它与背景颜色完全匹配。最简单的方法是什么？内容组件位于完全不同的层次结构级别，因此我无法直接访问它们。也许我也应该提到我使用的是MaterialUI。 有人有主意吗

---

谢谢您的帮助：）

这能回答您的问题吗？所有主题是同时呈现还是在不同的页面中呈现？@Alexander:谢谢您的回复！我已经找到了那个链接。看起来很有趣，但据我所知，不可能直接访问背景的颜色值。对我来说，最好的情况是识别背景的颜色，然后将顶部栏的颜色更改为该颜色（此外，将顶部栏内的字体颜色更改为白色，以便更好地阅读）。在混合混合模式下，它仅直接对顶栏进行一些图像处理（将颜色转换为差异等，并具有一定的透明度等）。我的假设错了吗？@Hao CherHong非常感谢您的快速响应！组件（主题）都在一个页面上一个接一个地呈现。您必须订阅文档的onScroll事件，并确定此时谁在视口中，然后设置state以更改背景颜色值。