css - 带背景图片的全屏元素 + 固定菜单

标签 css

我试图通过查看它的 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/

相关文章:

javascript - 下拉列表不会与下拉按钮垂直对齐

php - 当特定产品类别位于 Woocommerce 购物车中时有条件地应用 CSS 样式

html - 位置 :absolute not clearing, 仍然溢出

html - 如何高亮段落中的文字

html - 当我点击某个部分的任何部分时,在页面中央显示一个 div

html - 下拉悬停在 IE9 中不保持打开状态

php - php 上的 jquery 工具提示

asp.net - Html模板转换成Asp.net2.0

css - IE7-8 : 'clear' button with same height as input type ="file" 'browse' button

html - css 选择器将规则应用于多个类的相似元素