CSS 更改固定 header 滚动条的背景颜色

Question

是否有 CSS-only 技术可以在用户向上滚动页面后更改固定菜单栏的背景颜色？

颜色从 silver 变为 gold 的示例：
https://codepen.io/dpilafian/pen/pwREjR

下面是我目前使用的JavaScript解决方案：

HTML

<body>
   <header>
      <nav>Navigation Bar</nav>
   </header>
   <main>
      <h1>The Main Event</h1>
      <h2>Scroll this page up.</h2>
      <p>Content goes here.</p>
   </main>
   <footer>
      Footer
   </footer>
</body>

CSS（少）

body {
   padding-top: 30px;
   >header, >footer {
      background-color: silver;
      }
   }
body >header {
   position: fixed;
   top: 0px;
   width: 100%;
   transition: all 3s;
   &.scrolled {
      background-color: gold;
      }
   }

JavaScript（含jQuery）

const elem = $('body >header');
const scrolled = () => {
   const threshold = $(document).scrollTop() > 50;
   elem.toggleClass('scrolled', threshold);
   };
$(window).on({ scroll: scrolled });

如果可能的话，用某种 CSS 视差解决方案替换上面的 JavaScript 解决方案会很方便。

Answer 1

Is there a CSS-only technique to change the background color of a fixed menu bar once the user has scrolled up the page?

没有。 CSS.

无法根据滚动位置更改规则

Answer 2

您可以做一些 hack，放置一个透明的绝对定位 div，并估计所需的滚动距离转换为 top 坐标。当您滚动到它并将其悬停时，这将触发背景更改。

这是一个通用示例，但您可以根据自己的需要调整坐标和大小（悬停 div 的边框仅供视觉参考）。

body {
  font-family: sans-serif;
  margin: 0px;
  padding-top: 30px;
}

body header,
body footer {
  text-align: center;
  background-color: silver;
  padding: 10px;
}

body header {
  position: fixed;
  top: 0px;
  width: 100%;
  transition: all 3s;
}

.scrolled {
  background-color: gold;
}

.hoverEffect {
  position: absolute;
  height: 200px;
  background: transparent;
  border: 1px solid lightgray;
  text-align: center;
  line-height: 200px;
  top: 432px;
  left: 0px;
  right: 0px;
}

.hoverEffect:hover+header {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverEffect">scroll/hover to this part</div>
<header>
  <nav>Navigation Bar</nav>
</header>
<main>
  <h1>The Main Event</h1>
  <h2>Scroll this page up.</h2>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
</main>
<footer>
  Footer
</footer>

Answer 3

您可以使用 bootstrap 词缀和词缀顶部，它会根据您的卷轴在词缀和词缀顶部之间切换 class。所以你可以根据需要给 .affix 和 .affix-top css css。

注意：当用户没有滚动或滚动回到顶部时，会出现 affix-top。

CSS 更改固定 header 滚动条的背景颜色

CSS to change background color of fixed header on scroll

html

css

background-color

parallax