title: jQuery : add css class to menu item based on browser scroller position
body: <p>I have a menu: </p>
  
  <pre><code>  &lt;ul class="menu-bottom"&gt;
    &lt;li id="m1" class="active"&gt;&lt;a id="1" href="#"&gt;&lt;span&gt;Link 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li id="m2"&gt;&lt;a id="2" href="#"&gt;&lt;span&gt;Link 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li id="m3"&gt;&lt;a id="3" href="#"&gt;&lt;span&gt;Link 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want that depending of browser's scroller position, the <em>"active"</em> class goes the correct <em>&lt; li ></em> element.</p>
  
  <p>This is how I see it :</p>
  
  <pre><code>     if ($(document).height() == 500) {
  $('#m1').parent().addClass('active').
  siblings().removeClass('active');
  }
  
       if ($(document).height() == 1000) {
  $('#m2').parent().addClass('active').
  siblings().removeClass('active');
  }
  
       if ($(document).height() == 1500) {
  $('#m2').parent().addClass('active').
  siblings().removeClass('active');
  } 
  </code></pre>
  
  <p>I am not very familiar with jQuery Dimensions properties  so this code doesn't make much sense, but I hope you get the idea.</p>
  
  <p>If someone could tell me how to make this work, it would be really cool.</p>
  
  <p>Thanks :)</p>