Question

I need help with selecting a li element when a user scrolls to a particular section on a page:

See here for my progress: http://jsfiddle.net/FvBqA/349/

If you click on the “services” link the text color should change to red as you are on that section of the page, same again if you were to click on “home” or “contact”.

I have an idea regarding the jquery is that you’d need to be able to add and remove classes to the LI so that the css can pick up the selected class and render as per.

The functionality can be viewed here: http://demicreative.com/#capabilities

If you scroll down and see the work section you will notice the nav item is selected – I am after the same functionality.

Answer 1

Try this:

var header_height = $('#nav').outerHeight();
var sections = [];
$('#nav a').each(function(){    
    var section = $(this.hash).offset()
    sections.push({
        'link':$(this).parent(),
        'top' : $(this.hash).offset().top-header_height,
        'bottom' : $(this.hash).offset().top + $(this.hash).outerHeight() -header_height
    });
});

$('#nav a').click(function(e) {
    e.preventDefault();
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - header_height
    }, 500);
});


$(window).scroll(function(){   
    for(var i = 0; i < sections.length; i++)
        if($(window).scrollTop() >= sections[i].top &&
           $(window).scrollTop() <= sections[i].bottom){
            sections[i].link.addClass('selected')
                .siblings().removeClass('selected');
        }
});​

I attached the event directly to links in the #nav. I add the selected class to the parent element and remove the it from the parent element’s siblings. I also make the scroll offset 70 px less, the height of the nav and it’s padding.

Updated: There is no reference to any particular section only sections this means if you expand, adding new links or sections it will still work without having to updated the JavaScript.

Fiddle:
http://jsfiddle.net/iambriansreed/5Ta8j/