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

[ad_1]
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:

Link to the demo files shown in the lesson:

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!

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

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:


Posted

in

by

Tags:

Comments

31 responses to “Sticky Navigation Tutorial (Fixed Position CSS + JavaScript / jQuery)”

  1. LUI LA Avatar

    Thank you, you are a great teacher!

  2. Nguyễn Kim Avatar

    why when i try outerHeight("true") the text still jumping?

  3. Lola Romero Avatar

    I've followed every step, EVERY STEP! from this tutorial and it doesn't work for me 🙁 Even if I try with another tutorial and doesn´t work either… I don't know what to do… I'm dying!!!

  4. Ashish Mangla Avatar

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

  5. Oscar Rijpstra Avatar

    Instantly subscribed! Thanks

  6. Peter Brauer Avatar

    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

  7. Curtis Vannor Avatar

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

  8. crazy lazy Avatar

    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.

  9. Eobard Thawne Avatar

    thanks very much this work for me.

  10. Bea Learns Code Avatar

    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.

  11. Joppe Avatar

    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?

  12. Daniel Gutowski Avatar

    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.

  13. elephantman2222 Avatar

    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..

  14. Doğu Çağrı Özarpacı Avatar

    You are awesome thanks so much!!

  15. Farhan 4u Avatar

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

  16. LA D Avatar

    thanks very helpful

  17. Deepak Chaudhary Avatar

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

  18. Deepak Chaudhary Avatar

    hey i want fix 2 columns and hearder

  19. ubakara samy Avatar

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

  20. Lyneos Avatar

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

  21. Mark Augustine Avatar

    This worked on me. Thanks!

  22. Igor Lukov Avatar

    men You rock
    you save me a lot of time

  23. C Handu Avatar

    the css code not visible properly. cn anybody send the code

  24. Sunnyy Gohil Avatar

    you are a life saver mate, thank you so much

  25. Christiaan van de Burgt Avatar

    I have the same elements, just more li elements. At 6:42 you run the first example of your fixed state, but nothing seems to be working! It just scrolls right past my navber… My code is exactly the same as yours…

  26. polly2444 Avatar

    It works perfect! Thank You!

  27. XO GamingGB Avatar

    hi, i have done that but i need help becasue it doenst work for me, I use bootstrap nav system and I dont know how to make it sticky on the page. I have managed to keep it fixed on top of the page but then it goes over my banner and it is unreadable. PLEASE HELP!!!!

  28. Jordan Avatar

    Luv the way u doing man (y) superb ! but this coding didn't work for me… coz i have just completed my javascript learning and there might be some problem. can u help me if i can hv ur email to send u some snaps of those codings ?? plz help to stick my menu bar 😉

Leave a Reply

Your email address will not be published. Required fields are marked *