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

General Discussion

Posted by Eric Kidwell
Eric Kidwell
12,327 Points

How to create a sticky navigation bar that becomes fixed to the top after scrolling

I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top.

I believe this will take JS? I'm certain it will obviously need HTML and CSS, but I don't know where to start.

If you know of an article, codepen, or know the code to pull this off yourself, I'd be forever grateful!

Braxton Hancock
Braxton Hancock
1,906 Points

I think what your thinking about is sticky positioning.

navigation{position:sticky;}

4 Answers

Roland Cedo
Roland Cedo
21,261 Points
Roland Cedo
Roland Cedo
21,261 Points

Do you happen to have a site that you've seen this done?

Originally, I thought you may want to use position: fixed in your CSS...just want to make sure I dialed into what you're trying to do.

Marcus Tisäter
Marcus Tisäter
4,886 Points
Marcus Tisäter
Marcus Tisäter
4,886 Points

Use

 position: fixed;

to get something fixed to a browser. If you are looking for a parallax effect however you should look into a javascript.

Michael Wiss
Michael Wiss
19,233 Points
Michael Wiss
Michael Wiss
19,233 Points

Here's a nice one:

https://teamtreehouse.com/forum/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2

Corey Bzibziak
Corey Bzibziak
1,598 Points

Exactly what I was looking for, thanks!

Eric Kidwell
Eric Kidwell
12,327 Points
Eric Kidwell
Eric Kidwell
12,327 Points

@Michael Wiss Thanks for reminding me about this one :D