title: Add/remove class with jquery based on vertical scroll?
body: <p>So basically I'd like to remove the class from 'header' after the user scrolls down a little and add another class to change it's look.</p>
  
  <p>Trying to figure out the simplest way of doing this but I can't make it work.</p>
  
  <pre><code>$(window).scroll(function() {    
      var scroll = $(window).scrollTop();    
      if (scroll &lt;= 500) {
          $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
      }
  }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.clearHeader{
      height: 200px; 
      background-color: rgba(107,107,107,0.66);
      position: fixed;
      top:200;
      width: 100%;   
  }    
  
  .darkHeader { height: 100px; }
  
  .wrapper {
      height:2000px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;header class="clearHeader"&gt;    &lt;/header&gt;
  &lt;div class="wrapper"&gt;     &lt;/div&gt;
  </code></pre>
  
  <p>I'm sure I'm doing something very elementary wrong.</p>