Use jQuery to change a class dependent on scroll position

Question

I have a single page website which has a fixed floating nav. I want to be able to highlight which section the user is on by adding a class of say "on" to the relevant navigation a tag.

This class will need to be removed when the user is no longer on that section and the new current section then needs to be reflected in the nav.

This can't be done via a click function, as the user could still just scroll up and down the page. I have know idea if this can even be done or where to start as my jQuery is VERY limited.

Any help would be really appreciated.

Here is my current webpage, which doesn't have any active nav highlighting: http://ec2.dragonstaff.com/www.creativegems.co.uk/

Answer 1

You could grab the window's scrollTop with

var scrollTop=$(window).scrollTop();

http://api.jquery.com/scrollTop

Then you go through the content <div>s and cumulatively add their height up until you get to a value that is close enough to scrollTop. You probably have to experiment a little with regards to how you handle overlap.

Once you figured that your are scrolled to the content of, say, your portfolio you add the relevant class to the nav element.

Answer 2

Check out this similar question for an idea on how to accomplish this: http://stackoverflow.com/questions/2337630/find-html-element-nearest-to-position-relative-or-absolute

Answer 3

This seems to work with your site:

var $sections = $('section');  // all content sections
var $navs = $('nav > ul > li');  // all nav sections

var topsArray = $sections.map(function() {
    return $(this).position().top - 300;  // make array of the tops of content
}).get();                                 //   sections, with some padding to
                                          //   change the class a little sooner
var len = topsArray.length;  // quantity of total sections
var currentIndex = 0;        // current section selected

var getCurrent = function( top ) {   // take the current top position, and see which
    for( var i = 0; i < len; i++ ) {   // index should be displayed
        if( top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1] ) {
            return i;
        }
    }
};

   // on scroll,  call the getCurrent() function above, and see if we are in the
   //    current displayed section. If not, add the "selected" class to the
   //    current nav, and remove it from the previous "selected" nav
$(document).scroll(function(e) {
    var scrollTop = $(this).scrollTop();
    var checkIndex = getCurrent( scrollTop );
    if( checkIndex !== currentIndex ) {
        currentIndex = checkIndex;
        $navs.eq( currentIndex ).addClass("selected").siblings(".selected").removeClass("selected");
    }
});