html - 滚动时带有背景颜色转换但没有 JS 的仅 CSS 粘性标题

Question

我想创建粘性标题效果，您可以在此处看到 JekyNewAge theme页面，只要它悬停在英雄部分上，标题菜单就是透明的，但是一旦你滚动过这个区域，它就会过渡到白色背景。
该代码适用于“无 JS”站点，因此解决方案必须是纯 CSS 且没有 javascript。
一直在尝试各种position: sticky设置和旧方法来实现粘性，但没有运气。网上有很多关于如何做到这一点的例子，但到目前为止，我发现没有一个没有 javascript 的例子。总是有一些 jQuery 或其他代码片段涉及。
注意:我的 CSS 是从 SaSS 文档生成的，因此使用它的示例也很棒。
也许这是不可能的..我非常感谢您的意见!

Answer 1

我想了一下。我仍然不认为你可以像在纯 css 示例中那样进行过渡，但这是我正在考虑的那种技巧，它在英雄上方有一个透明的标题，在它之后得到一个坚实的背景。也许它有帮助:

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>