title: Change header background on scroll
body: <p>I'm trying to change the header background of a page on scroll.</p>
  
  <p>I'm using the code below. The JS is working, when scrolling greater than 100px I can see the class .not-transparent being added to the  element in HMTL. The problem is, that class isn't being subsequently being called in the CSS.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div id="logo"&gt;logo&lt;/div&gt;
      &lt;div id="nav-wrapper"&gt;
          &lt;nav&gt;
              nav
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;script&gt;
  $(window).on("scroll", function () {
      if ($(this).scrollTop() &gt; 100) {
          $("header").addClass("not-transparent");
      }
      else {
          $("header").removeClass("not-transparent");
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's the CSS</p>
  
  <pre><code>header {
      width:100%;
      position:fixed;
      top:0px;
      z-index:3;
  }
  header.not-transparent {
      background: #252525;    
  }
  </code></pre>