title: Change background of fixed header when scrolling past elements
body: <p>I'm trying to get the background-color of my fixed header to change upon scrolling over certain DIV sections on the page, similar to this:</p>
  
  <p><a href="http://www.adamrudzki.com/" rel="nofollow noreferrer">http://www.adamrudzki.com/</a></p>
  
  <p>The sections I'm using don't have a fixed height.</p>
  
  <p>I've found this similar question <a href="https://stackoverflow.com/questions/18598570/change-background-color-while-scrolling">Change background-color while scrolling</a> </p>
  
  <p>( which uses this fiddle <a href="http://jsfiddle.net/cEvJk/18/" rel="nofollow noreferrer">http://jsfiddle.net/cEvJk/18/</a> ) </p>
  
  <pre><code>var t = $('#about').offset().top - 100;
  
  $(document).scroll(function(){
      if($(this).scrollTop() &gt; t)
      {   
          $('header').css({"background-color":"green"});
      } 
  });
  </code></pre>
  
  <p>But I'm unable to get the effect to repeat for all sections.</p>