Applet Orchard

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

appletorchard

Tags:

Comments

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

  1. LUI LA Avatar
    LUI LA

    Thank you, you are a great teacher!

    Reply
  2. Nguyễn Kim Avatar
    Nguyễn Kim

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

    Reply
  3. Lola Romero Avatar
    Lola Romero

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

    Reply
  4. SJMinnovations Avatar
    SJMinnovations

    excellent

    Reply
  5. Ashish Mangla Avatar
    Ashish Mangla

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

    Reply
  6. Oscar Rijpstra Avatar
    Oscar Rijpstra

    Instantly subscribed! Thanks

    Reply
  7. Peter Brauer Avatar
    Peter Brauer

    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

    Reply
  8. Curtis Vannor Avatar
    Curtis Vannor

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

    Reply
  9. crazy lazy Avatar
    crazy lazy

    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.

    Reply
  10. Eobard Thawne Avatar
    Eobard Thawne

    thanks very much this work for me.

    Reply
  11. premier69 Avatar
    premier69

    Thank You!

    Reply
  12. Bea Learns Code Avatar
    Bea Learns Code

    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.

    Reply
  13. Joppe Avatar
    Joppe

    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?

    Reply
  14. Daniel Gutowski Avatar
    Daniel Gutowski

    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.

    Reply
  15. elephantman2222 Avatar
    elephantman2222

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

    Reply
  16. Doğu Çağrı Özarpacı Avatar
    Doğu Çağrı Özarpacı

    You are awesome thanks so much!!

    Reply
  17. Farhan 4u Avatar
    Farhan 4u

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

    Reply
  18. LA D Avatar
    LA D

    thanks very helpful

    Reply
  19. Raphael A. Alves Avatar
    Raphael A. Alves

    Thank you, Sir! 😛

    Reply
  20. Deepak Chaudhary Avatar
    Deepak Chaudhary

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

    Reply
  21. Deepak Chaudhary Avatar
    Deepak Chaudhary

    hey i want fix 2 columns and hearder

    Reply
  22. ubakara samy Avatar
    ubakara samy

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

    Reply
  23. Lyneos Avatar
    Lyneos

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

    Reply
  24. Mark Augustine Avatar
    Mark Augustine

    This worked on me. Thanks!

    Reply
  25. Igor Lukov Avatar
    Igor Lukov

    men You rock
    you save me a lot of time

    Reply
  26. C Handu Avatar
    C Handu

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

    Reply
  27. Sunnyy Gohil Avatar
    Sunnyy Gohil

    you are a life saver mate, thank you so much

    Reply
  28. Christiaan van de Burgt Avatar
    Christiaan van de Burgt

    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…

    Reply
  29. polly2444 Avatar
    polly2444

    It works perfect! Thank You!

    Reply
  30. XO GamingGB Avatar
    XO GamingGB

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

    Reply
  31. Jordan Avatar
    Jordan

    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 😉

    Reply

Leave a Reply

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