我试图通过查看它的 css 来了解这个网站是如何完成的:http://www.genymobile.com/
我想弄清楚的是顶部菜单元素如何从全屏元素背景图像中获得背景图像,然后在用户滚动时保持粘性!
谁能告诉我他们是怎么做到的?
最佳答案
导航栏 div 设置了 position:fixed
,因此即使用户滚动,它也会“固定”在顶部。
关于导航栏背景颜色的变化:
最初它有 background-color: rgba(106, 106, 106, 0.3);
- 因为 alpha 值为 0.3 - 它看起来是透明的,所以它与背景图像融合在一起。
一旦用户滚动 - 您可以在开发人员工具中看到通过 javascript 添加了一个新类“收缩”,它更改了导航栏的一些属性 - 包括背景颜色。
关于css - 带背景图片的全屏元素 + 固定菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31913911/