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!
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
Eric Kidwell
12,280 PointsHow 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!
4 Answers
Roland Cedo
21,261 PointsDo 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
4,886 PointsUse
position: fixed;
to get something fixed to a browser. If you are looking for a parallax effect however you should look into a javascript.
Corey Bzibziak
1,598 PointsExactly what I was looking for, thanks!
Eric Kidwell
12,280 Points@Michael Wiss Thanks for reminding me about this one :D
Braxton Hancock
1,906 PointsBraxton Hancock
1,906 PointsI think what your thinking about is sticky positioning.
navigation{position:sticky;}