CSS-only 粘性 header 滚动时有背景颜色过渡但没有 JS

Question

我想创建您可以在此 JekyNewAge theme 页面上看到的粘性 header 效果，其中 header 菜单只要悬停在英雄部分上就是透明的, 但一旦您滚动经过此区域，就会转换为白色背景。

该代码适用于“No-JS”站点，因此解决方案必须是纯 CSS 并且没有 javascript。

一直在尝试各种 position: sticky 设置和较旧的方法来实现粘性，但没有运气。网上有很多关于如何执行此操作的示例，但 none 到目前为止，我发现哪个没有 javascript。总会涉及一些 jQuery 或其他代码片段。

注意：我的 CSS 是从 SaSS 文档生成的，因此使用它的示例也很棒。

也许这是不可能的..非常感谢您的意见！

Answer 1

稍微想了一下。我仍然不认为您可以像使用纯 css 的示例那样进行转换，但这是我正在考虑的那种技巧，它确实在获得的英雄上有一个透明的 header一个坚实的背景之后。也许有帮助：

body {
  margin: 0;
}
header {
  padding: 1rem 2rem;
  position: fixed;
  width: 100%;
  z-index: 2;
}
.hero {
  background: teal;
  color: white;
  padding: 4rem 2rem;
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .2);
  font-size: 3rem;
  text-align: center;
}
.header-bg {
  padding: 1rem 2rem;
  position: fixed;
  width: 100%;
  background: white;
  top: 0;
}
.content {
  background: lightgrey;
  padding: 2rem;
  min-height: 800px;
}

<header>Header</header>
<div class="hero">HERO</div>
<div class="header-bg">&nbsp;</div>
<div class="content">Content</div>

Answer 2

你只需要添加 z-index: 1;在 class 选择器中

CSS-only 粘性 header 滚动时有背景颜色过渡但没有 JS

CSS-only sticky header with background color transition when scrolling but no JS

html

css

sass

user-experience