title: Add and Remove Class On Scroll
body: <p>I'm working on an HTML page with a small navigation that starts out about halfway down the page. I want the navigation bar to stick to the top of the page (become fixed) when it reaches the top of the page. My attempt looked like this:</p>
  
  <p>The script:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      var header = $(".clearHeader");
      $(window).scroll(function() {    
          var scroll = $(window).scrollTop();
  
          if (scroll &gt;= 100) {
              header.removeClass('scrollHeader').addClass("fixedHeader");
          } else {
              header.removeClass("fixedHeader").addClass('scrollHeader');
          }
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="scrollHeader"&gt;
              &lt;div class="row" style="background:#444;"&gt;
              &lt;div class="container"&gt;
              &lt;a href="#"&gt;&lt;div class="col-sm-3 smallNav"&gt;
              Perks
              &lt;/div&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;div class="col-sm-3 smallNav"&gt;
              Growth
              &lt;/div&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;div class="col-sm-3 smallNav"&gt;
              Technology
              &lt;/div&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;div class="col-sm-3 smallNav"&gt;
              Apply
              &lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.scrollHeader { position: relative !important;}
  .fixedHeader {position: fixed !important; }
  </code></pre>
  
  <p>Nevertheless, this code doesn't work. Any suggestions? I have jQuery 1.9.1 loaded. <a href="http://jsfiddle.net/5d7ymoc0/1/" rel="nofollow">Fiddle</a></p>