LearnHow to Create a Sticky Navigation

   
Avatar

Guil Hernandez
writes on February 5, 2015

Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport. There are lots of jQuery plugins we can use to display a sticky navigation, but in this short video, we’ll learn how to build our own with a few lines of code!

View it on CodePen


NOTE: I made a few changes to the JavaScript in the final CodePen Demo. Notice the more efficient use of variables in the scroll function.


If you’d like to learn more about HTML and CSS, check out our guided path of Web Design courses now available at Treehouse!

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

14 Responses to “How to Create a Sticky Navigation”

  1. Guil, you are the man!! Thank you so much for your easy to understand lesson. I will use it immediately for a project. God bless you.

  2. Nice tut, thanks !

  3. Man thats amazing , I was searching for such thing for weeks and now finally i found somthing worth. I used it on my blog and its running flawless .Thanks and keep the great work up.

  4. Thanks for this video. It is so easy and simple to apply.
    Also i have a question.
    Did you have any document working on sticky menu but using native javascript?
    I m having problems with SEO when using jquery (pagespeed insights indicates jquery lags my sites) and when i use basic javascript for easy animations i have no problems so I ll be grateful if you lead me to javascript only for sticky menu. Thank you very much again.

  5. I am getting more and more requests for a sticky navigation, thanks for the quick tips. Its really trending right now.

  6. Courtland Santos on February 13, 2015 at 9:28 pm said:

    Awesome tutorial Guil! Thanks for taking time out to show this.

  7. thank you for sharing this post

  8. im looking for this shot….thanks man

  9. Thanks for a great tutorial Guil. Really good stuff.

    Was wondering your thoughts on instead of using the body tag to reveal header ( via body {padding-top: 250px} ), what if a container were used to to wrap around the .header and .main to achieve same goal? Are wrapper classes not recommended in this case? thanks!

    i.e

  10. Awesome! I always look forward to your posts because I usually use them immediately for a client project. Thanks!

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop