CSS只有粘性标题，滚动时有背景颜色转换，但没有JS

Question

我想创建你可以在这个JekyNewAge主题页面上看到的粘性标题效果，只要标题菜单悬停在英雄部分上，它就是透明的，但只要你滚动过这个区域，它就会过渡到白色背景。

该代码用于"；无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>

Answer 2

您只需要添加z-index:1；类内选择器