jQuery : add css class to menu item based on browser scroller position
- by antosha
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 :)
