jquery scroll, change navigation active class as the page is scrolling messed up, and making wrong links active? -

http://jsfiddle.net/5cfm6/1/

so whenever click on watch, goes div video, if click other link on nav bar, highlights active link, , it's wrong link. example, if click on about, highlight links. me highlight correct div i'm at?

this have far.

$(window).scroll(function () {     var windscroll = $(window).scrolltop();     if (windscroll >= 100) {         $('.container div').each(function (i) {             if ($(this).position().top <= windscroll - 20) {                 $('nav a.active').removeclass('active');                 $('nav a').eq(i).addclass('active');             }         });     } else {         $('nav a.active').removeclass('active');         $('nav a:first').addclass('active');     }`enter code here`  }).scroll(); 

i point out (at least in fiddle) "sponsors" div outside of div.container, not work sponsors (e.g. if add more sections after "sponsors") , if accidentaly now, might run other unexpected problems in future.

so, have code (not accidentaly) work correctly is:

1. place "sponsors" div inside div.container.
2. change:
   $('.container div').each(function (i) { to
   $('.container > div').each(function (i) {
3. change:
   if ($(this).position().top <= windscroll + 20) { to
   if ($(this).position().top <= windscroll + 34) {,
   since scrolltop offset set in line 4 (scrollpoint = $('...').offset().top - 34).

working demo can found here.

edit: 1 last case might want address when last section's height smaller current windows height, impossible scrolltop ever reach last section's position().top. in case, still makes sense hightlight last element in nav-bar, when user has scrolled way bottom. can achieved means of small addition:

$(window).scroll(function () {     ...     var frombottom = $(document).height()                       - ($(window).scrolltop() + $(window).height());     if (frombottom == 0) {     // <-- scrolled bottom         $('nav a.active').removeclass('active');         $('nav a:last').addclass('active');     } else if ... 

(the working demo has been updated illustrate too.)

(note: not relevant current question, might want replace </br>s in code <br/> :))