如何解决仅限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"> </div>
<div class="content">Content</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。