javascript - 滚动经过特定 div 后更改颜色

Question

我试图在滚动经过另一个 div 时在我的一个 div 中实现某种变化。解释一下，我希望在滚动经过标题图像时将汉堡菜单的颜色从白色更改为黑色。我尝试通过在 X 个像素后更改 CSS 来实现此目的，但这种方法会根据视口(viewport)大小产生不同的结果。由于我的目标是在多个设备上保持相同的效果，即保持响应能力，因此这不是一个选项。

我想要完成的示例可以在这里找到:

http://altcph.dk/

此示例中特别有趣的部分是，当您将菜单图标放置在标题和下一个 div 之间的精确分界线上时，上半部分保持白色，而下半部分已经改变颜色。我对实现这一点特别感兴趣，但我对实现这种效果完全不知所措。

Answer 1

您共享的网站实际上使用了多个菜单。菜单是绝对定位的，一次位于标题中(白色)，一次位于标题外部(蓝色)。标题堆叠在页面中其余元素的上方(z-index:3)，因此它覆盖了蓝色菜单。当标题向上滚动时，会出现下面的白色菜单。