Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Page WordPress Site

Shaun Vine
Shaun Vine
5,184 Points
Posted by Shaun Vine
Shaun Vine
5,184 Points

How to implement the active nav class based on page Scroll?

Hi Zac, I have created a one page WordPress website. I would like to add the feature to the page that will show the visitor which section of the page they are on by highlighting the navigation item in the sticky menu.

I have tried a few jQuery plugins but they do not seem to work well with WordPress. This is what I am trying to do; http://www.outyear.co.uk/smint/ I could not get this to work with WordPress.

This is the best I can do. Example can be seen here http://dev.edurolearning.com/

Thanks, Shaun.

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Did you make that wordpress theme from scratch? Did you use Bootstrap?

2 Answers

Shaun Vine
Shaun Vine
5,184 Points
Shaun Vine
Shaun Vine
5,184 Points

I used Underscores and customized it.

pniel
pniel
866 Points
pniel
pniel
866 Points

i believe the best way is to add a few more lines to the jquery function "scroll to" that we created. something like: $(this).addClass("active");

and probebly you'll also want to remove previous link's active class so add this line before the above: $('nav a').removeClass('active');

full code: <script>

( function( $ ) {

    $("nav a").click(function() {
        var link = $(this).attr('href');
        $('nav a').removeClass('active');
        $(this).addClass("active");
        $('html, body').animate({
            scrollTop: $(link).offset().top
        }, 600);
    }); 

} )( jQuery );

</script>