title: One page website change menu color each section
body: <p>I'm currently building a one page website with a fixed navigation menu (with a blue background). This one page website has 4 sections, 2 with a blue background and 2 with a white background.</p>
  
  <p>My idea to do with this menu is when i scroll <strong>(not mouse hover)</strong> over a blue section, the menu background turns white. and when i scroll over a white section, the background changes back to blue.
  An example can be found <a href="http://www.franzsans.de/" rel="nofollow">here</a>.</p>
  
  <p><em>(Not my site, but look at the changing color of the menu while scrolling)</em></p>
  
  <p>My HTML code looks like this:</p>
  
  <pre><code>&lt;div class="subMenu" &gt;
      &lt;div class="inner"&gt;
          &lt;a href="#sTop" class="subNavBtn"&gt;Home&lt;/a&gt;
          &lt;a href="#s1" class="subNavBtn"&gt;Over mij&lt;/a&gt; 
          &lt;a href="#s2" class="subNavBtn"&gt;Kennis&lt;/a&gt;
          &lt;a href="#s3" class="subNavBtn"&gt;Projecten&lt;/a&gt;
          &lt;a href="#s4" class="subNavBtn"&gt;Contact&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="section s1"&gt;
      &lt;div class="inner"&gt;
          &lt;h1&gt;Section 1&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="section s2"&gt;
      &lt;div class="inner"&gt;
          &lt;h1&gt;Section 2&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="section s3"&gt;
      &lt;div class="inner"&gt;
          &lt;h1&gt;Section 3&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="section s4"&gt;
      &lt;div class="inner"&gt;
          &lt;h1&gt;Section 4&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a simple way to do this?
  Thanks in advance.</p>