title: Changing classes with animation depending on scroll position
body: <p>My page contains four sections, each set to 100% height with different background color. At the very top I have a fixed menu. I want the menu to change it's background color depending on which section the user is at the moment, so it blends better with the background.</p>
  
  <p>So far I have managed to make the menu's bg color to change when portfolio is entered, but it's not much and I am stuck. It has to change it's color again, when the user scrolls back to home, forth to about and so on. Also, I want it to be animated, but I don't know how to use animate() with addClass(). I've been trying for the past two days with no success at all.</p>
  
  <p>The other thing that tortures me is that the menu elements should respond to the scroll position too. For example, if the user scrolls from Home to Portfolio, the active class should be applied to Portfolio and removed from Home. Hope you got the idea.</p>
  
  <p>So far my code looks like this:</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;div id="menu-center"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a class="active" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="inactive" href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="inactive" href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="inactive" href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="home"&gt;&lt;/div&gt;
      &lt;div id="portfolio"&gt;&lt;/div&gt;
      &lt;div id="about"&gt;&lt;/div&gt;
      &lt;div id="contact"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have no idea why, but I can't post the css here without breaking the whole post, so just go to <a href="http://jsfiddle.net/mkaramitev/Dxtyu/" rel="nofollow"><strong>jsFiddle</strong></a> to see it all together.</p>
  
  <pre><code>$(document).ready(function () {
      var menu = $('.menu');
      var portfolio_position = $('#portfolio').offset().top;
      var about_position = $('#about').offset().top;
      var contact_position = $('#contact').offset().top;
  
      $(window).scroll(function () {
          var scroll = $(this).scrollTop();
          if (scroll &gt;= portfolio_position) {
              menu.removeClass('menu').addClass('menu-light');
          }
      });
  });
  </code></pre>