LearnHow to Create a Sticky Navigation

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!

14 Responses to “How to Create a Sticky Navigation”

  1. Markus on January 25, 2017 at 2:07 am said:

    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. Tom on August 31, 2016 at 7:22 am said:

    Nice tut, thanks !

  3. Abhijit Krishn on October 23, 2015 at 8:04 am said:

    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. Mike on September 28, 2015 at 11:09 pm said:

    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. beauty parlours in chennai|good beauty parlours in chennai|list of beauty parlours in chennai|good beauty parlours in chennai|famous beauty parlours in chennai|beauty parlours in chennai|top beauty parlours in chennai|beauty parlours at chennai|beauty par on September 17, 2015 at 2:44 pm said:

    Thanks for sharing your info. I truly appreciate your efforts and I will be waiting for your next write ups thanks once again.|

  6. Teelah on February 19, 2015 at 10:43 am said:

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

  7. conrad on February 16, 2015 at 12:57 pm said:

    very good tut indeed

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

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

  9. طراحی سایت on February 9, 2015 at 7:06 am said:

    thank you for sharing this post

  10. budyk on February 8, 2015 at 11:46 pm said:

    im looking for this shot….thanks man

  11. LL on February 8, 2015 at 11:13 am said:

    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

  12. Stefani Lefler on February 6, 2015 at 1:25 pm said:

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

  13. Chris Herrage on February 6, 2015 at 8:26 am said:

    Great!

Leave a Reply

You must be logged in to post a comment.

Want to learn more about CSS?

Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.

Learn more