Css 带有背景图像的全屏元素+；固定菜单

我试图通过查看css来了解该网站是如何实现的：

我想弄清楚的是，顶部菜单元素如何从全屏元素的背景图像中获得背景图像，然后在用户滚动时保持粘性

---

有人能告诉我他们是如何做到这一点的吗？

导航栏div已经设置了

位置：fixed

设置，因此即使用户滚动它也会“粘”在顶部

关于导航栏背景颜色的更改：

最初它有

背景色：rgba（106，106，106，0.3）-由于alpha值为0.3，因此它看起来是透明的，以便与背景图像合并

用户滚动后，您可以在开发工具中看到，通过javascript添加了一个新类“shrink”，该类会更改导航栏的一些属性，包括背景色。
导航栏的
位置设置为
固定
。这允许导航栏始终位于网页顶部。
导航栏还包含一些Javascript动画，可以将背景颜色从
灰色
更改为
白色

页面的其余部分为
div
s，宽度为100%。
每个
div
都包含一个
背景图像
，这应该可以回答您的问题：我不是在寻找关于如何更改菜单背景颜色的信息。因此，只需像@Kyrbi这样更新该答案的CSS。我正在寻找一种解决方案，使菜单元素位于全屏元素之上，但似乎我没有将菜单元素的位置设置为固定。