HomeОбразованиеRelated VideosMore From: LearnWebCode

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

1240 ratings | 133470 views
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: http://learnwebcode.com/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: https://twitter.com/learnwebcode 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: https://www.youtube.com/watch?v=1vMFpT0h-WI&list=UUHRp19HU7Y2LwfI0Ai6WAGQ https://www.youtube.com/watch?v=gIvR-WX5lIQ&list=UUHRp19HU7Y2LwfI0Ai6WAGQ
Html code for embedding videos on your blog
Text Comments (156)
Awuoche Kevin (8 days ago)
i get an error saying jQuery is not defined what could be the problem
Clawsn (1 month ago)
Thanks for the tutorial:) Although I'm having an issue with my design. I'm trying to figure out how to set the height of the "nav-placeholder" to a min-height, and a height of auto. It seems to work more fluent that way. I tried using minHeight in place of height but the code ends up breaking. Any suggestions?
Ababa Wusiman (1 month ago)
My salute, sir! I've bought 2 of your courses on Udemy and learned quite a bit. Love your way of clarifying things from a student's perspective. You rock!!!
Paavo Smit (3 months ago)
Im trying to follow this code but it doesnt work. Both the alert code and count code works. But when I come to .addclass / .removeclass nothing happens. Any idea?
Mathew Joseph (3 months ago)
Thanks! Super Helpful!
Jeanne Cruz (4 months ago)
Hi, can you make a tutorial for blogger to have a sticky sidebar fixed from top to footer?
Zeeshan Khan (6 months ago)
i love the ending line , thanks , bye :)
Farooq Khan (7 months ago)
Hi your code is not working in my case What should i do? Please help fast its my mail id [email protected]
Arun Sharma (8 months ago)
Great!
Ruth Rojas (8 months ago)
Thank you, this a excellent tutorial.
Kranti Nebhwani (9 months ago)
Much appreciated, very well made video with clear instructions! I also want to know how to do this without jquery would it be possible? I dont know if you read comments on such old videos so maybe I'll ask the community too: Anyone able to do a quick code conversion of how this would look with plain javascript instead of jquery? or any pointers or tips?
John Richardson II (9 months ago)
Excellent; thank you, Sir.
Seo Steam (9 months ago)
Yooo Man I am a big fan of your way of teaching :) keep it up 3>
kamal singh bankoti (9 months ago)
thanks a lot very useful when u are using Bootstrap 4
snow sior (10 months ago)
thank u
Amir Khan (10 months ago)
Hey Bro i have a problem i have make a sticky navbar but when it convert in mobile screen so all the content are show in the navbar means all the content are showing in the navbar background please repaly too my comment
Don Nguyen (10 months ago)
Thanks for the video! Exactly what I needed.
Jovica Margit (10 months ago)
nice tutorial but still not work :(
narkar (10 months ago)
This video is outdated as now you can use CSS only to archive this, with position: sticky; , however there are still lots of usefull thing to learn from this video.
Giorgio Vitanza (11 months ago)
Hi man, thanks for this script which made me learn a lot in few time! I wanna make u a quesion: what is "!" in jQuery and why is it so important in this statement - if (!jQuery(".blog-nav").hasClass("fixed")) { - that it won't otherwise work?
narkar (10 months ago)
is jsut negative. like if NOT. I think.
Maz (11 months ago)
Great tutorial.. !
Luis Andrade (1 year ago)
Great video and explanation 👍
jimydog000 (1 year ago)
Thanks, this is exactly what I was looking for.
Gamal Abdall (1 year ago)
Also thank you for making the code available.
Gamal Abdall (1 year ago)
Very useful, Thanks a million.
Matheus Rocha (1 year ago)
Nice, but anybody can tell me which program was used to create the codes?
PAHouseLink (1 year ago)
(old post, hopefully someone is still monitoring?) Great tutorial and helps 95% of the way... What would the additional JS look like if there was another container below the first and once you hit that it "un-stickyed"??
MOHD TAQI Arzoo (1 year ago)
Thanks for the video 📹 it's really helpful for me But when I use this with bxslider I didn't work properly the slider 🎚 goes from the top of nav bar kindly guide
ninjaassassin (1 year ago)
Nice work
jean luke (1 year ago)
There is a problem with sticky nav on Safari iPad. Is that fixed?
Kevin Anadkat (1 year ago)
Well thank you this was pretty useful
LUI LA (1 year ago)
Thank you, you are a great teacher!
Nguyễn Kim (1 year ago)
why when i try outerHeight("true") the text still jumping?
Lola Romero (1 year ago)
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!!!
SJMinnovations (1 year ago)
excellent
Ashish Mangla (1 year ago)
after scrolling top bottom and refreshed page but class is not added. what to do?
Oscar Rijpstra (1 year ago)
Instantly subscribed! Thanks
Peter Brauer (1 year ago)
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
Curtis Vannor (1 year ago)
does anyone elses navbar change position when the screen is maximized and minimized?
Eobard Thawne (1 year ago)
thanks very much this work for me.
premier69 (1 year ago)
Thank You!
Bea Learns Code (1 year ago)
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.
Joppe (1 year ago)
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?
Daniel Gutowski (1 year ago)
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.
elephantman2222 (1 year ago)
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..
You are awesome thanks so much!!
Farhan 4u (1 year ago)
Thank you so much! sir but my below content is jumping.
LA D (1 year ago)
thanks very helpful
Raphael A. Alves (1 year ago)
Thank you, Sir! :P
Deepak Chaudhary (1 year ago)
bt some issus are happn smo properties using with the inspact element bt same proparty class are not working when i import css classes
Deepak Chaudhary (1 year ago)
hey i want fix 2 columns and hearder
ubakara samy (1 year ago)
If I use fixed position for nav the images on my page are overlaps while I scroll the page
Alex Cross (1 year ago)
Use a z-index tag in your CSS code
mitaanshu agarwal (1 year ago)
have you found any solution? I am having the same issue.
Lyneos (1 year ago)
Thank you. This helped very much. Althought I didn't really have the problem where I needed to create the placeholder div.^^
Mark Augustine (2 years ago)
This worked on me. Thanks!
Igor Lukov (2 years ago)
men You rock you save me a lot of time
C Handu (2 years ago)
the css code not visible properly. cn anybody send the code
Sunnyy Gohil (2 years ago)
you are a life saver mate, thank you so much
Christiaan vandeBurgt (2 years ago)
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...
LearnWebCode (2 years ago)
There's a link in the description to the code I used in the video. From that post you can view the JS directly or even view the demo page in your browser. Maybe comparing what you have to that will help? Might be missing something tiny like a semicolon or case sensitive variable name, etc...
polly2444 (2 years ago)
It works perfect! Thank You!
XO GamingGB (2 years ago)
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!!!!
Jordan (2 years ago)
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 ;)
hachirev (2 years ago)
I have to thank you. I have been trying to do this for 2 days and nothing and nowhere I searched gave me an answer I could use. Thank you so much!!!!
Uros Krunic (2 years ago)
I have set nav elements height to 110px but when i scroll down to the nav bar my nav-placeholder element collapses to 0 height. Any advice on how to fix this?
Kyaw Zin Latt (2 years ago)
very clear and nice video. easy to understand and nice way of explanation
Prashanth Olekar (2 years ago)
i'm using nested accordions and within the child accordion i have 5-10 header with some contents each ,,what i want here is the child accordion should be fixed on top while scrolling and within child accordion the headers should fixed on top one by one while scrolling..i mean when i scrolling, first header should go to top and when second header comes up first one should hide and second one should fixed on top.. like this http://www.jqueryrain.com/?TsZgrrbF i want this within accordions,, how to do that? help me please?
Thomas Fischer (2 years ago)
Very good tutorial, thank you! But I think your solution with the "jumping" is a little bit too excessive. I just put around the menu a div with a class and with "position: absolute", and then the sticky navigation is done with your code at 6:22. When the position changes from "absolute" to "fixed" there is now jumping in the content.
Amol Mali (2 years ago)
Really Helpful Video..I was facing the same NAV Jumping issue. Now I am sure I can resolve this issue..Thank u so much LearnWebCode..
Tomas Lopez (2 years ago)
Thanks a lot, man. This video was very useful.
Practice Repeat (2 years ago)
why use javascript when you can use purecss for a sticky navigation
Sattar Jayed (2 years ago)
9:56 That laughter !! (y)
Carlos Benavides (2 years ago)
Awesome tutorial (Y). Thanks for sharing
Shankar Gurung (2 years ago)
thank's buddy....
JN L (2 years ago)
Does anyone know how to make the Fixed class fade in?
Really really helpful......... Thnx.... :)
Yên Nguyễn (2 years ago)
good video, thanks
CodeBit (2 years ago)
Can you do it without jQuery? I find it highly unnecessary to use jQuery for one single thing on a website. Edit: I did it myself, I also made it a lot less heavy on the browser resources.
U r all Right ! take my cordial love from Bangladesh ,, thank for sharing the geat works !
CodeBit (2 years ago)
+Jforce1212 No problem, we're all here to learn from eachother. :)
DJFelicita (2 years ago)
This helps a lot buddy, thanks so much! =D
CodeBit (2 years ago)
+Jforce1212 Ok, so here you can see a demo of it that I made: http://flexbox.bitballoon.com/ I don't know if this was my final version, but it's working. I've provided the HTML, CSS and JS file. Hopefully this will help. :) index.html http://pastebin.com/U06tKEGs styles.css http://pastebin.com/H0Zae1Ba script.js http://pastebin.com/PaZCZUV5
DJFelicita (2 years ago)
Thanks for the effort =)
Jack Daniels (3 years ago)
this is working fine for me thanks a lot here is my code nav{ z-index: 500px; width: 100%; height: 90px; background-color: #26a65b; } #cnav{ width: 100%; height: 90px; background-color: gray; position: relative; } .fixed{ position: fixed; top: 0px; } $(document).ready(function() { var nav = $('nav'); var banner = $('#top'); var pos = nav.position(); $('nav').wrap('<div id="cnav"></div>'); $('cnav').height($('nav').outerHeight()); $(window).scroll(function() { var windowpos = $(window).scrollTop(); if (windowpos>=banner.outerHeight()) { nav.addClass('fixed'); } else { nav.removeClass('fixed'); } }); });
Saqibuddin Siddique (3 years ago)
Hi, Man i am trying with bootstrap and i applied "hidden-xs" class on my Top header Image but when i re-size browser like mobile version then Top Header will be hide and Sticky Navigation will not work fine, Help me Please..
Dina Lossi (3 years ago)
Can a bottomBoundary be set and if so how?
Dina Lossi (3 years ago)
Hi! Great video! My only question is what would be the best code to add to this to prevent the Stick Navigation Bar from moving past the footer?
zeldaz100 (3 years ago)
Yeah, couldn't get this to work, HTML file not really clear or it could just be me. If I inspect the element in fire fox, what is this? .clearfix:before, .clearfix:after { content: ""; display: table; } At he begging of your video you have div class="menu" ...div class="inner-menu". Are you jumping between a finished file that's your own and a fresh one? Please forgive any grammar, thank you for a respond.
Bart Heimenberg (3 years ago)
Great tutorial again. Thanks!
Norberto Bitas (3 years ago)
finally... I've found this ... many thanks.
Daniel Titus (3 years ago)
Fantastic. This was extremely helpful!
Charlotte Rees (3 years ago)
Well explained, thank you. Very useful.
Daan Copyright (3 years ago)
Hey! Awesome tutorial, it really helped me out! Thanks a lot :) There is just one problem, I can't get rid of the 'jumpy content'. It is really annoying. I have tried to solve it, but no luck so far. Can't find any other ways to get rid of the jumpy content, I have already searched the internet. Some help would be great! Maybe any other solutions to get rid of the jumpy parts?
Jack Daniels (3 years ago)
+Daan Copyright nav{ z-index: 500px; width: 100%; height: 90px; background-color: #26a65b; } #cnav{ width: 100%; height: 90px; background-color: gray; position: relative; } .fixed{ position: fixed; top: 0px; } $(document).ready(function() { var nav = $('nav'); var banner = $('#top'); var pos = nav.position(); $('nav').wrap('<div id="cnav"></div>'); $('cnav').height($('nav').outerHeight()); $(window).scroll(function() { var windowpos = $(window).scrollTop(); if (windowpos>=banner.outerHeight()) { nav.addClass('fixed'); } else { nav.removeClass('fixed'); } }); });
Colleen Sweeney (3 years ago)
I'm trying to use this sticky menu underneath an image that dynamically resizes so the image is set with width:100% and height:auto These things are making the var navOffset = jQuery("navigation").offset().top; report back incorrect values, any suggestions on how to work around this?
Theme Compiler (3 years ago)
but i used your way for twenty eleven  but nothing works up !!! tell me bro how you can make it for a wp theme ?? works finely !!
Brandon Pabirowski (3 years ago)
Hi, nice video. I've got a question about the menu jumping down when you scroll.  I followed the whole video and got the menu to scroll down, but it still jumps.  If anyone can help would be much appreciated.  Thanks in advance.
Great tutorial, thx!
Aaron Szczurek (3 years ago)
you are such a good teacher it makes me interested in the paid lessons you have. I love the thoroughness of your example the advice about preventing jumping elements and the resizing issue is something that I feel separates you from more amateurish tutorials. Thanks!
Glopieo (3 years ago)
Can't even get the initial alert to make sure things are ok to work! Everything seems to be just as you've typed, any ideas?
Sania (11 months ago)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
MaxPicAxe (3 years ago)
Anyone know why this script is not working? <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> jQuery(document).ready(function() { var navOffset = jQuery("#header").offset().top; alert(navOffset); }); </script>
MaxPicAxe (3 years ago)
Thanks for the help!
Marco Penitenti (3 years ago)
+MaxPicAxe You have to close the first tag script at the end of the src, and reopen it: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script> jQuery(document).ready(function() { var navOffset = jQuery("#header").offset().top; alert(navOffset); }); <script> Then be scure to have the id="header" tag in your html otherwise the code want process alert command.
h2 hoofd (3 years ago)
None of all this works for me, actually whenever i try to put some java in my webpage it never ever works i know i'm a rookie when it comes to jscript but i really don't now what i'm doing wrong all the time.
theElSueno (3 years ago)
+Tom Claus it is.. but in older level of Html, in HTML5 you can do it like that.  Dear look i saw you somthing.. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <!-- HTML codes --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="your_external_file.js"></script> </body> </html> that's the Right way to wright js file.  if you paste googleapis.com file and external file in between <head></head> part like this <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="your_external_file.js"></script><!- so it's not working -> </head> <body> <!-- HTML codes --> </body> </html> Even Bootstrap not accept it... BUT BUT BUT.... <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <!-- HTML codes --> <script>    //You do internal javascript, so it's working... </script> </body> </html> Hope It's Help you... ^_^ ^_^ ^_^
h2 hoofd (3 years ago)
 i've tried this once already and it worked indeed. but i've heard once that you can put your javascript anywhere in your code as long as you put it between the <script> tags. So what i've heard isn't true?
theElSueno (3 years ago)
+Tom Claus dear tom, put all your java file between <body></body> like this  <body> <!-- All html code gone here --> <script src="../../Google_JQ_offline/jquery1.1.3.min.js"></script> <script src="sticky_support/sticky_nav.js"></script> </body> then it's works perfectly...
MaxPicAxe (3 years ago)
+Tom Claus Are you using this link for jquery? http://code.jquery.com/jquery-latest.min.js
Thean Heng (3 years ago)
Very good tutorial
scott (3 years ago)
thank you
Paper Krane (3 years ago)
Awesome tutorial! Was very informative and thorough! I was wondering how you could fix the sticky nav if an individual were to resize the window after the height has been calculated on the initial function. Once page is loaded, the height set (I have a 100% page banner at the top) and if I resize the browser slightly making it shorter, the bar will jump when scrolled to, taking on the initial height value it calculated. I know there is a .height() function but how would you write the jquery where it constantly finds the height for a responsive banner?
Dawid Anonim (3 years ago)
hello :)  Could you share with me, what kind of html editor do u use? Thanks :)
Brand0nS_13 (3 years ago)
+Dawid Anonim brackets
Lisa Ellsworth (3 years ago)
I know you must be incredibly busy, but I'm having a similar problem, except my nav menu jumps to the left when I scroll down. I tried to edit the CSS to mimic what you're doing here, but I can't seem to get it. To top it off, the program I'm using will only alow me to edit the CSS code. Is there anyway you could just take a quick look for me? Any help would be greatly appreciated! script type="text/javascript" src="/files/theme/jquery.jqtransform.js" ></script> <script language="javascript"> jQuery(function() { var $ = jQuery; $('#main-wrap .wsite-form-radio-container, .wsite-com-product-option-dropdown, .wsite-com-product-option-radio').jqTransform(); $('#header-wrap .row2').waypoint('sticky'); }); </script>
olukoya benjamin (3 years ago)
Hi, that was a nice video. i have a question which is, how do i fix my fixed-menu bar appearing behind my image slider. 'cos i already fix my drop down menu and when scrolling, the image slider kept appearing on the navigation bar, so pushing it (menu bar) to the back, please how do i fix this? Also, i observed that when my menu is fixed at the top, it creates some margin at the top, i seem not understand why this is, please any help? thanks
Damir Huselja (2 years ago)
+olukoya benjamin css of navbar z-index: 99;
jasonc_tutorials (3 years ago)
+olukoya benjamin it's easier to use the sticky jquery plugin. http://stickyjs.com/
LearnWebCode (3 years ago)
+olukoya benjamin Hi Olukoya! When you mention that certain content is "behind" or overlapped by other content it sounds like a "z-index" issue. Try giving both elements in question a "z-index" value, and make sure the element you want to be "on top" of the other element to have a larger numerical z-index value. Also, make sure that your image slider is using "position: relative" so that the z-index value you assign it is actually used. I have a tutorial on YouTube about z-index if you think that might be helpful (https://www.youtube.com/watch?v=l55hSbBUdmQ).

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.