html - 纯 CSS 更改滚动固定导航栏的背景颜色？

Question

我只是想知道是否有一种纯 CSS 方法可以在滚动经过某个垂直点时更改固定导航栏的背景颜色？我想知道这是否可以根据另一个元素的 ID 或高度在 CSS 中完成？

我知道在 JavaScript 中有多种方法可以实现这一点，但我想知道是否可以使用纯 CSS 来实现同样的事情。感谢您的协助!

Answer 1

您可以使用渐变和 background-attachment:fixed 来模拟这一点。

这是一个例子:

.fixed {
   height:100px;
   width:100%;
   position:fixed;
   color:#fff;
}


body {
  height:300vh;
  background:    
    linear-gradient(#fff,#fff) 0 100px/100% 100% no-repeat fixed,
    linear-gradient(to bottom, blue 300px, red 0) center/100% 100%;
}

<div class="fixed">
  this is a fixed navbar where the color will change after 300px of scroll
</div>