The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

  • # April 13, 2013 at 8:25 am


    I would like to achieve something like this: for this website i’m working on:

    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’).eq(i).addClass(‘active’);

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


    # 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