Sidenavigation Which Highlights Which Part of Page is Viewed

Question

I would like to create a sidenavigation bar simply for the different sections on one of my scroll intensive webpages. What I would like to do is have the navigation bar indicate which part of a site is being viewed. An example of this is http://www.ifc.com/back-to-portlandia/#welcome. The navigation bar on the right with the six circular buttons labled 1 through six actually each turn orange when that corresponding part of the website is being viewed.

How would I do that?

Answer 1

So here's what I did for you. I made many slide and with their height I can know when the user change of slide. When he does that, I remove the class .current and I put it to the next li. For the moment, it only works when you're scrolling down, but with some adjustment you could easily do the samething while the user scroll up.

Here's the fiddle

My Javascript look like this :

$(document).scroll(function() {
    if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
        $('.current').removeClass('current');
        var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
        $('.navigation li:eq('+newSlide+')').addClass('current');
    }
});