title: CSS to change background color of fixed header on scroll
body: <p>Is there a CSS-only technique to change the background color of a fixed menu bar once the user has scrolled up the page?</p>
  
  <p>Example where color changes from <code>silver</code> to <code>gold</code>:<br>
  <a href="https://codepen.io/dpilafian/pen/pwREjR" rel="nofollow noreferrer">https://codepen.io/dpilafian/pen/pwREjR</a></p>
  
  <p>Below is the JavaScript solution I am currently using:</p>
  
  <p><strong>HTML</strong>
  </p>
  
  <pre><code>&lt;body&gt;
     &lt;header&gt;
        &lt;nav&gt;Navigation Bar&lt;/nav&gt;
     &lt;/header&gt;
     &lt;main&gt;
        &lt;h1&gt;The Main Event&lt;/h1&gt;
        &lt;h2&gt;Scroll this page up.&lt;/h2&gt;
        &lt;p&gt;Content goes here.&lt;/p&gt;
     &lt;/main&gt;
     &lt;footer&gt;
        Footer
     &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS (LESS)</strong>
  </p>
  
  <pre><code>body {
     padding-top: 30px;
     &gt;header, &gt;footer {
        background-color: silver;
        }
     }
  body &gt;header {
     position: fixed;
     top: 0px;
     width: 100%;
     transition: all 3s;
     &amp;.scrolled {
        background-color: gold;
        }
     }
  </code></pre>
  
  <p><strong>JavaScript (with jQuery)</strong>
  </p>
  
  <pre><code>const elem = $('body &gt;header');
  const scrolled = () =&gt; {
     const threshold = $(document).scrollTop() &gt; 50;
     elem.toggleClass('scrolled', threshold);
     };
  $(window).on({ scroll: scrolled });
  </code></pre>
  
  <p>It would be convenient to replace the above JavaScript solution with some kind of CSS parallax solution if possible.</p>