In this lesson we learn how to create a “sticky” navigation which is another way of saying an element should use “fixed” position once it would normally scroll out of view.
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:
Introduction to JavaScript with jQuery
Intermediate JavaScript with jQuery
Link to demo page shown in lesson
Direct link to “script.js” file
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? The next step is to use a web host to share your site with the world. Learn about web hosts, my favorite one, and how to get a plan for only $5.78 per month.
I thought This Sticky Menu was complicated.. Thanx soo much for making it soo simple 🙂
Hi thanks for the tutorial, it’s great, but I just can’t make that it works, I have a drop down menu, and its inside a class, so I created a div called menu1 and inside it an ul with also a class called nav, I tried to attach them both: .menu1 and .nav, but didn’t work, then I created a nav to hold all my menu and copy your js code with the css classes, but still doesn’t work.
I watched your tutorial several times to find out my mistake and I think its in the js attach, I can see you have 2 sources for the javasript, one called script.js and another called query-1.11… I think there is my mistake because I created a new js file (script.js) and there’s where I wrote the code, but I don’t know what the other js is for.
Can you help me with that?
Thank you
Hi Carlos,
The other JavaScript file (jQuery) is a popular JS library that our navigation code depends on, so be sure to perform a web search for jQuery and include it before the script.js file (or try to copy/mimic my example page). If that still doesn’t fix your menu – you can create a new CodePen or JSFiddle of your current code and send me the link and I can take a look.
Thanks!
Brad
I applied this to my website, but instead of changing to fixed when the nav got to the top it changed when a photo I have above it got to the top. So the nav ends up jumping to the top way early. Any thoughts on what might causing that?
This sounds like a Google Chrome / Safari issue where images are not taken into account when calculating height values because the JavaScript is firing too early. A possible fix is to change the very first line of the JavaScript:
Change “document” to “window”
Change “ready” to “load”
That worked! Thank you so much!
Often scratched my head trying to figure out how it is done, thanks to your lesson I now understand how it actually works.
Cheers, Tony