仅限CSS的粘性标头，滚动时具有背景颜色过渡，但没有JS

问题描述

我想创建一个粘性页眉效果，您可以在此JekyNewAge theme 页面上看到此页面，只要标题菜单悬停在英雄部分上，标题菜单就是透明的，但是会尽快转换为白色背景当您滚动到该区域时。

代码是针对“ No-JS”网站的，因此解决方案必须是纯CSS且没有javascript。

已经尝试了各种position: sticky设置和较旧的方法来实现粘性，但是没有运气。网上有很多关于如何执行此操作的示例，但是到目前为止，我还没有找到没有JavaScript的示例。总是涉及一些jQuery或其他代码段。

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

也许这不可能。.非常感谢您的输入！

解决方法

我考虑了一下。我仍然不认为您可以像使用纯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,.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>

html sass user-experience