滚动时带有背景颜色过渡但没有 JS 的纯 CSS 粘性标题答案

【问题标题】：CSS-only sticky header with background color transition when scrolling but no JS滚动时带有背景颜色过渡但没有 JS 的纯 CSS 粘性标题
【发布时间】：2023-03-04 14:59:01
【问题描述】：

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

代码是针对“No-JS”网站的，所以解决方案必须是纯 CSS 而不是 javascript。

一直在尝试各种position: sticky 设置和旧方法来实现粘性，但没有运气。网上有很多关于如何做到这一点的例子，但到目前为止我还没有找到没有 javascript 的例子。总有一些 jQuery 或其他代码涉及 sn-p。

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

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

【问题讨论】：

你是否为粘性标题添加了 jquery ？
你的英雄部分是全宽的吗？
是的，它是全宽的，而且我的整个站点中根本没有 javascript。添加 JS 是不行的。
没有js就无法实现header过渡效果，据我所知，因为css不知道滚动位置。您可以做的最好的事情是复制标题标记并使其在滚动时以某种棘手的方式出现，但不会相同
谢谢。我怕是这样。只有通过 sticky 获得的过渡是在滚动经过该区域时消失的位置。

标签： html css sass user-experience

【解决方案1】：

我考虑了一下。我仍然认为你不能像示例中那样使用纯 css 进行转换，但这是我正在考虑的那种技巧，它确实在 hero 上方有一个透明的标题，在它之后有一个纯色背景。也许有帮助：

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>

【讨论】：

谢谢。这仅对原始示例稍作让步即可工作。但我认为，如果这意味着我可以坚持我的“No-JS”方法:)

【解决方案2】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。