title: Using jQuery to change header text color while over certain div
body: <p>I am trying to change the text color on a fixed header when certain div elements are under it. This is the code that I have. </p>
  
  <pre><code>$(window).scroll(function () {
      $('.white-header').each(function() {
          scrollPosition = $(window).scrollTop();
          elementTop = $(this).offset().top;
          elementBottom = $(this).outerHeight() + elementTop;
          if (scrollPosition &gt; elementTop &amp;&amp; scrollPosition &lt; elementBottom) {
              $('#header').css('color','#fff');
          }
          if (scrollPosition &lt; elementTop || scrollPosition &gt; elementBottom) {
              $('#header').css('color','#222');
          }
      });
  });
  </code></pre>
  
  <p>The problem is that it only seems for work for one element. If there is only one div with class .white-header everything works great. But when there are mutiple only one of them works (seems to be the last one that works).</p>
  
  <p>Here is a <a href="https://jsfiddle.net/augpergo/3/" rel="nofollow">JS Fiddle</a> showing the problem.</p>