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

CSS

Posted by Reuben Mansell
Reuben Mansell
5,134 Points

Teamtreehouse.com menu bar - love it, how do you do it?

Hi Team Treehouse crew,

The teamtreehouse.com top nav bar is really cool and I think it will help me to improve conversion rates on my own new website and also client's websites.

I like the way that on scroll it focuses in to one call to action, helping to focus users attention.

Do you have any insights on how this has been coded? Do you have any good js libraries you would suggest to achieve the scrolling functions?

A tutorial would be nice because i think this is a great little piece of functionality.

Reuben

Reuben Mansell
Reuben Mansell
5,134 Points

Just to be clear, i'm talking about the team treehouse main page - such as the nav bar you see here: http://blog.teamtreehouse.com/

Not the nav bar in this area here...

4 Answers

Andreas Anastasiades
Andreas Anastasiades
2,916 Points

I'm guessing it works with this js

//sticky cta
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 320) {
    $('html').addClass('scrolled-past-hero');
  } else {
    $('html').removeClass('scrolled-past-hero');
  }
});

After scrolling 320px it adds the class scrolled-past-hero which triggers the animation

Reuben Mansell
Reuben Mansell
5,134 Points
Reuben Mansell
Reuben Mansell
5,134 Points

Ah thanks Andreas, i was 90% there, just hadnt added the y variable - so ok Jquery part is worked out.

How do you think the html is changed to bring the different menu in, is that using css or jquery?

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

That's with css

one element goes like this

.fixed-cta {
    -webkit-transition: color 200ms ease-in-out,top 200ms ease-in-out;
    -moz-transition: color 200ms ease-in-out,top 200ms ease-in-out;
    transition: color 200ms ease-in-out,top 200ms ease-in-out;
    position: fixed;
    top: -50px;
    left: 0;
    width: 100%;
    overflow: hidden;
    text-align: center;
    height: 20px;
    font-weight: 500;
    float: left;
    z-index: 99;
    color: #5fcf80;
    font-size: 14px;
}

.scrolled-past-hero .fixed-cta {
    top: 32px;
}

when the class is added top position changes with animation (CSS3)

Reuben Mansell
Reuben Mansell
5,134 Points
Reuben Mansell
Reuben Mansell
5,134 Points

Ah i see, yeah its clever. The other two menu elements are still there, they just have opacity:0; so they don't display. then i guess the border is added to free trial to make it look like a button and the position is moved.

Thanks for helping me to decipher it!