Q:

Pure CSS Change Background Color of Fixed Navbar on Scroll?

I am just wondering if there is a pure CSS way to change the background color of a fixed navbar when scrolling past a certain vertical point?  I am wondering if this can be done in CSS based on the ID of another element, or a height?  
I know of ways in JavaScript to achieve this but am wondering if the same thing can be achieved with pure CSS. Thank you for the assist!

A:

You can simulate this using gradient and background-attachment:fixed.
Here is an example:

.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>

