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

Posted by Gavin Macken
Gavin Macken
18,070 Points

Javascript scroll menu bar help

Hi all . . . .

I'm having trouble using javascript here I have a menu bar with scrolls and changes colour nicely on clicking each button but I would like it to change when scrolling with my mouse as well as onclick !!

How can I do this ??

jQuery(document).ready(function($) {
    $('.meetTheTeamButton').scroll('.meetTheTeamButton').click(function(e){
        e.preventDefault();
        $('html, body').stop().animate({scrollTop: $($(this).attr('href')).offset().top-180}, 500);

    });
        (function(){
         $(".meetTheTeamButton").animate({ backgroundColor: "white", color: "black"},200 , function(){});
          $(".meetTheTeamButton.default").animate({
              backgroundColor: "#0099ff",
              color: "white" 
         },200, function() {
            // Animation complete.
          });
        $('html, body').stop().animate({scrollTop: $($(".meetTheTeamButton.default").attr('href')).offset().top-260}, 500);
}());
});

console.log("hello");
function activateButton(e){
    jQuery(document).ready(function($) {
        var but=e;

                $(".meetTheTeamButton").animate({ backgroundColor: "white", color: "black"},200 , function(){});
          $(but).animate({
              backgroundColor: "#0099ff",
              color: "white" 
         },200, function() {
            // Animation complete.
    });
});

}

<div id="meetTheTeamTitle">
<div id="buttonsPosition">
<a class="meetTheTeamButton default active" href="#aboutUs" onclick="activateButton(this)">About Us</a>
<a class="meetTheTeamButton about" href="#mtt_team" onclick="activateButton(this)">Our Team</a>
<a class="meetTheTeamButton" href="#mtt_advisors" onclick="activateButton(this)">Advisors</a>

<div style="clear: left;"></div>
</div>
</div>

3 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

I have a pen set up here that seems to do what you mean...

http://codepen.io/Craig-Watson/pen/WvRyjW

Maybe this will help you get going.

Craig :)

Gavin Macken
Gavin Macken
18,070 Points
Gavin Macken
Gavin Macken
18,070 Points

Thank you . . . .

I've been trying to work through your and work it out however I keep breaking the original ?? Yours is what I want just less complicated.

Any advice ?? Sorry only learning javascript

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Gavin,

Pulled apart the bones of pen to leave this:

http://codepen.io/Craig-Watson/pen/bBbWxB

It basically adds a class to the navbar when the top of the page moves up by 40px.

The pen was originally set up with the bootstrap framework but this does not effect what you are doing or looking to do here.

.navbar-scroll {
    background: #ffffff;
    padding: 0;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.4);
    transition-duration: 0.6s;
}

Just find the above in the CSS and play around.

Hope this gets you further forward :)

Craig