jquery - Fixed navigation after scroll and CSS classes toggle -

jquery - Fixed navigation after scroll and CSS classes toggle -

i created simple web page layout. can find here: http://jsfiddle.net/guwdj/1129/

i managed create fixed navigation after user scrolls downwards point. have been struggling accomplish assign class="active" each list item user moves section section.

when navigation gets fixed on top of viewport when want class="active" added first list item

<li> <a href="#something" class="active">something</a> </li>

and move on downwards page, class="active" removed , added next list item.

i have found plugins truth haven't managed integrate them project. also, because of fact new jquery, don't understand code.

i found http://jsfiddle.net/guwdj/3/ 1 time again had hard time integrating..

so, advice?

thank in advance

i updated fiddle include new block of javascript handles highlighting of menu options based on illustration fiddle gave.

the block added is:

$(".main-content section").each(function(i) { if ($(this).position().top <= windscroll - hdr + 20) { mn.find('a.active').removeclass('active'); mn.find('a').eq(i).addclass('active'); } });

this loops through each of sections have menu options , checks scroll of window. after substracting out height of header , adding padding in, number compared position of element on page. if scroll greater position, mark menu element active.

keep in mind since sections rather small, lastly couple sections may not highlight since can't scroll downwards far.

jquery scroll css-position