• Wednesday , 23 May 2018

Sticky Navigation Tutorial (Fixed Position CSS + JavaScript / jQuery)

Code Canyon

Learn how to create a “sticky” navigation (element should use “fixed” position once it would normally scroll out of view). Check out my “Get a Developer Job” course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF

Link to the demo files shown in the lesson:

Sticky Navigation Tutorial

Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around! http://p.asmallorange.com/learnwebcode/specialoffer

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/

Follow LearnWebCode on Twitter for resources and updates:

In this lesson we make use of JavaScript and the jQuery library for event handling and conditional logic. If you are unfamiliar with JavaScript I recommend watching these two introductory videos:

Original source

3d Ocean

Related Posts


  1. Ashish Mangla
    July 9, 2017 at 18:02

    after scrolling top bottom and refreshed page but class is not added. what to do?

  2. Oscar Rijpstra
    July 9, 2017 at 18:02

    Instantly subscribed! Thanks

  3. Peter Brauer
    July 9, 2017 at 18:02

    one tip i can give for people which notice that their website is getting slower when they scroll up and down, declare the wrap statement outside the window.scroll, otherwise it will make every time a new place-holder class if you scroll

  4. Curtis Vannor
    July 9, 2017 at 18:02

    does anyone elses navbar change position when the screen is maximized and minimized?

  5. crazy lazy
    July 9, 2017 at 18:02

    the .fixed .nav-inner-most is not really necessary.
    Just move the css stuff from .nav-inner-most to .fixed .nav-inner.
    And change padding to 0.

    .fixed .nav-inner {
    padding: 0;
    margin: 0 auto;
    max-width: 700px;
    background-color: #e7ecf2;

    That will do the same.

  6. Eobard Thawne
    July 9, 2017 at 18:02

    thanks very much this work for me.

  7. premier69
    July 9, 2017 at 18:02

    Thank You!

  8. Bea Learns Code
    July 9, 2017 at 18:02

    I have been trying to create a sticky nav for MONTHS. I've read documentation on frameworks, watched tutorials, and even copy and pasted code. I don't know what the deal was, but none of it worked.

    This tutorial actually worked for me! I didn't use the two inner navs, but everything else was good enough. Thank you so much for this video.

  9. Joppe
    July 9, 2017 at 18:02

    Hey I'm not sure if you're still actively answering questions but I think I stumbled on quite a hard one. So first of all this video helped me out a ton! Thanks a lot 🙂 Now there is a problem with this sticky bar in combination with bootstrap. I used this in my bootstrap page and everything seemed fine until I started using the bootstrap row and column classes later on in the page. As soon as I give a div the row and column classes to make simple divisions, all of the divs contents will shine through the bar. E.g. the bar overrides the background colour of my div, however, the text and embedded video in the div will override the navbar (I think this also has to do with the fact that the navbar in fixed position at the top is not seen as an element by the page as you explained). If you have any experience with bootstrap, is there any way you could help me figure out a solution to this problem?

  10. Daniel Gutowski
    July 9, 2017 at 18:02

    Great tutorial, thanks man. However I've got a question: how would you develop this method to make the navigation follow scrolled content again after sticking it just like you did in this video?

    For instance, let's say we have two columns: on the right side long paragraphs and on the left side the titles of each and we want to show the title of the paragraph being seen at the right moment.

  11. elephantman2222
    July 9, 2017 at 18:02

    Your tutorials are great. I am a total noob to this stuff, which also leaves me a perspective of being untainted by being "used to" certain methods or solutions. Why does it feel like half the time in CSS I am spending time unbreaking things that CSS should handle with ease? Float clearfix, border-boxes, these inner-div and innermost-divs in JS all seem like hacking a language that is not up to the task of being consistent. It seems like more than just learning certain quirks.. It feels like CSS in and of itself is inadequate..

  12. Doğu Çağrı Özarpacı
    July 9, 2017 at 18:02

    You are awesome thanks so much!!

  13. Farhan 4u
    July 9, 2017 at 18:02

    Thank you so much! sir but my below content is jumping.

  14. LA D
    July 9, 2017 at 18:02

    thanks very helpful

  15. Raphael A. Alves
    July 9, 2017 at 18:02

    Thank you, Sir! 😛

  16. Deepak Chaudhary
    July 9, 2017 at 18:02

    bt some issus are happn smo properties using with the inspact element bt same proparty class are not working when i import css classes

  17. Deepak Chaudhary
    July 9, 2017 at 18:02

    hey i want fix 2 columns and hearder

  18. ubakara samy
    July 9, 2017 at 18:02

    If I use fixed position for nav the images on my page are overlaps while I scroll the page

  19. Lyneos
    July 9, 2017 at 18:02

    Thank you. This helped very much. Althought I didn't really have the problem where I needed to create the placeholder div.^^

  20. Mark Jabay
    July 9, 2017 at 18:02

    This worked on me. Thanks!

Leave A Comment

You must be logged in to post a comment.