All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Fixed navigation bar – add active class to link items based on scroll

  • # April 13, 2013 at 8:25 am

    Hey,

    I would like to achieve something like this:

    http://jsfiddle.net/gUWdJ/3/ for this website i’m working on: http://oandg.co.uk.s156312.gridserver.com/

    I have managed to get it partially working but for the “home” section it still highlights ‘About Us’

    $(‘nav a’).on(‘click’, function() {

    var scrollAnchor = $(this).attr(‘data-scroll’),
    scrollPoint = $(‘section[data-anchor=”‘ + scrollAnchor + ‘”]’).offset().top – 28;

    return false;

    })

    $(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 1000) {
    $(‘body section’).each(function(i) {
    if ($(this).position().top < = windscroll - 1000) {
    $(‘nav a.active’).removeClass(‘active’);
    $(‘nav a’).eq(i).addClass(‘active’);
    }
    });

    } else {
    $(‘nav a.active’).removeClass(‘active’);
    $(‘nav a:first’).addClass(‘active’);
    }

    }).scroll();

    # April 13, 2013 at 8:50 am

    This reply has been reported for inappropriate content.

    If I remove $(‘nav a:first’).addClass(‘active’); it stops highlighting the ‘About us’ when on the home section but if you click it the class is not added like all other links

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed