Hi, I have a menu:

  <ul class="menu-bottom">
  <li id="m1" class="active"><a id="1" href="#"><span>Link 1</span></a></li>
   <li id="m2"><a id="2" href="#"><span>Link 2</span></a></li>
   <li id="m3"><a id="3" href="#"><span>Link 3</span></a></li>
</ul>

I want that depending of browser's scroller position, the "active" class goes the correct < li > element.

This is how I see it :

     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');
} 

I am not very familiar with jQuery Dimensions properties so this code doesn't make much sense, but I hope you get the idea.

If someone could tell me how to make this work, it would be really cool.

Thanks :)