Grow your CSS skills. Land your dream job.

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

    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.

*May or may not contain any actual "CSS" or "Tricks".