smooth scroll navigation with active class

Question

I have been working on a smooth scroll navigation bar for a website. I have managed to get the navigation bar to scroll to the different sections within the HTML document, and I been trying to get the navigation bar links to become active depending on the section of the webpage you are on.

After playing around with the code I cannot figure out how to do this. What do I need to do?

This is my code:

 $('#navbar li').click(function() { $(this).addClass('active').siblings('li').removeClass('active'); }); 

 @import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,900,700,500); html{ font-family: 'Maven Pro', sans-serif; } body{ background:fixed url(images/bright_squares.png) #cccccc; position:relative; padding:0; margin:0; } #home {padding-top:50px;height:500px;color: #fff; background-image:url(images/random_grey_variations.png);} #about {padding-top:50px;height:500px;color: #fff;} #portfolio {padding-top:50px;height:500px;color: #fff;} #contact {padding-top:50px;height:500px;color: #fff;} background-dark{ background:fixed url(images/random_grey_variations.png); } #navbar { position:fixed; top: 0px; left: 0px; right: 0px; height: 60px; margin: 0; padding: 0; list-style: none; background: #222; font-family: 'Maven Pro', sans-serif; font-size: 18px; font-weight: 300; } #navbar li { position: relative; float: left; line-height: 60px; background: inherit; text-align: center; transition: all .2s; } #navbar li a { position: relative; display: block; padding: 0 20px; line-height: inherit; color: white; text-decoration: none; } #navbar li:before { content: ''; display: block; position: absolute; left: 50%; margin-left: -30px; width: 60px; height: 60px; background: #222; border-radius: 50%; transform: rotate(45deg); transition: all 0, background .2s; } #navbar li:hover:before { margin-top: 1px; border-radius: 50% 50% 0 50%; transition: all .1s, background .2s, margin-top .2s cubic-bezier(.5,30,.2,0); } #navbar li:hover, #navbar li:hover:before { background: #3a3a3a; } #navbar li.active, #navbar li.active:before { background: steelblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="navbar"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> <div id="home"> <h1>Welcome</h1> <p>Test</p> </div> <div id="portfolio"> <h1>portfolio</h1> <p>Test</p> </div> <div id="contact"> <h1>contact</h1> <p>Test</p> </div> <div id="about"> <h1>About Me</h1> <p>Test</p> </div> 

Answer 1

I think this might answer your question. Just add this code inside the click function you already have.

$($(this).children().attr('href')).addClass('selected').siblings('div').removeClass('selected');

You will need to change the home link to #home instead of # though

Answer 2

If you want to forgo all of that, here's the even quicker version.

<script>
    $('#navbar li').click(function() {
        $(this).addClass('active').siblings('li').removeClass('active');
        var x = $($(this).children().attr('href')).first().offset().top
        $('body').animate({
          scrollTop: x
        }, 2000);
    });
</script>

This will add the scrolling animation I think you're looking for.