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

Question

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

我知道用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>