Simple smart sticky navigation bar with jQuery
10.11.11Posted by: Jayhan Sim
It’s been a while since I posted tutorial article. In this post, I will show you how to create a smart sticky navigation bar easily with just few lines of Javascript codes, powered by the mighty jQuery.
Smart sticky navigation bar is a bar that sits at its original place above the fold, but when you start scrolling down the long page, it will sticks at the top of the browser window and follows, similar to IGN’s corporate website’s navigation bar. Continue reading out the demo and the codes after the break.
Demo
Check out the demo! It works on most modern browsers.
Tutorial
For this tutorial, we are going to use HTML, CSS and jQuery. The HTML structure is fairly simple, the most important thing is to have a header, the navigation bar and the content area below the navigation bar. Everything wrapped in a div id called “wrapper”.
HTML
<div id="wrapper">
<header>
<h1>Simple Smart Sticky Navigation Bar</h1>
</header>
<nav>
<p>Navigation Content</p>
</nav>
<div id="content">
<p>Website content here.</p>
</div>
</div>CSS
Here are the important CSS rules to style up the page. For the navigation bar, I used the artwork from 5 stylish navigation bars which was created by me.
#wrapper {
width:940px;
margin: 0 auto;
}
header {
text-align:center;
padding:70px 0;
}
nav {
background:url(img/nav-bg.png) no-repeat;
height: 60px;
width: 960px;
margin-left: -10px;
line-height:50px;
position: relative;
}
#content {
background: #fff;
height: 1500px; /* presetting the height */
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.fixed {
position:fixed;
}Notice that I added the “fixed” class which we will going to use it in jQuery code.
jQuery
At first we need to have the jQuery file. Grab it from jQuery official site or copy paste via scriptsrc.net, then paste it at the bottom of the HTML file before the end of body tag. Then include the javascript code below within another script tag:
$(document).ready(function() {
//Calculate the height of <header>
//Use outerHeight() instead of height() if have padding
var aboveHeight = $('header').outerHeight();
//when scroll
$(window).scroll(function(){
//if scrolled down more than the header’s height
if ($(window).scrollTop() > aboveHeight){
// if yes, add “fixed” class to the <nav>
// add padding top to the #content
(value is same as the height of the nav)
$('nav').addClass('fixed').css('top','0').next()
.css('padding-top','60px');
} else {
// when scroll up or less than aboveHeight,
remove the “fixed” class, and the padding-top
$('nav').removeClass('fixed').next()
.css('padding-top','0');
}
});
});Well that’s it! Please check out the demo to see the result and view the source code! Personally I think scrollTop() is a very useful when dealing with scrolling, it can be used in many simple yet useful functions. I hope you learn something from this tutorial!
Credits:
Background texture from Subtle Patterns | Font from Google Web Fonts
Hi, I like your plugin and this is somewhat I’m looking for. Is it possible to scroll up the sticky header once it reaches the footer div???
Thank You Very Much.
January 22nd, 2012 at 9:53 pmPV
This is exactly what I was looking for and it works like a charm. Thanks so much!
March 22nd, 2012 at 4:58 pmis it possible to have certain height of the top content fixed. For example: I have
text
I would like all the way upto the nav2 to be stuck n the top of the browser when you start scrolling the text. Thanks for all your help in advance.
March 28th, 2012 at 2:44 pmHello,
May 9th, 2012 at 6:47 amThis tricks works perfectly but my probleme is that I would like addClass when I scroll over two one not only one.
Is that possible ?
Hi Luc V, I don’t really understand your question. Which element you would like to AddClass?
May 10th, 2012 at 1:58 amHi!
This is a so clean and powerfull sticky navbar, i updated my webapp in 2 steps :
- updating my CSS file with your nav properties & adding .fixed class
- adding your jQuery code in my jQuery menu file
Thank you
May 12th, 2012 at 12:04 pmI would like to know how to change the nav-bar once it becomes “sticky” such as :
http://www.zendesk.com/product/key-features
They include their logo once you scroll past it, how would this be possible?
May 16th, 2012 at 8:41 pmHi Danh, that will require extra jquery to call the logo to slide in when the user start scrolling down.
May 18th, 2012 at 8:19 amm4as, you are most welcome!
May 18th, 2012 at 8:19 amHi Jayhan, thank you very much for providing this. I was just testing this code (in a blank test page) and it works like a dream on all the five major browsers.
However, when I added your code into the website which I am currently working on, in Safari and Chrome, it seems that my navbar ‘jumped’ upwards to the midpoint of my top div. No such problems in Firefox, IE and Opera.
I am sure this has nothing to do with your code but something to do with my CSS or something. I am at my wits’ end. Can I seek some advice from you?
June 4th, 2012 at 5:25 pmHi Randy, yeah sure I can take a look into it.
June 5th, 2012 at 2:38 amThanks jayhan!
My site is at http://www.lemonore.com, the jscript is at the top, whereas the nav bar is under .
For the CSS (lemonore.com/css/template.css), the classes are .nav-pos, nav, nav:after, .nav-bar and .fixed.
I sincerely appreciate your help!
June 5th, 2012 at 4:51 pmHi Jayhan,
Thanks for offering to help! I have devised a work around. Thanks again!
June 6th, 2012 at 11:30 amThanks for such a great tutorial. But it is not working IE6 …. plz help me
June 12th, 2012 at 5:48 amHi rajunix, IE6 is a very old browser and you should upgrade it to the latest version. Or use better browser like Chrome or Firefox.
June 19th, 2012 at 3:06 pmHi jayhan,
nice tutorial!
I got a problem: In Firefox everything works well. But when I scroll down on my website using Google Chrome, then the fixed navigation ‘jumps’ a few pixels to the left. I don’t know how to solve this.
It would be nice if you could help me
Regards Kiwi
June 21st, 2012 at 4:48 pmHi Kiwi, is there any demo I can see?
June 24th, 2012 at 1:25 pmIf it’s so wonderful why are you not using it on this website?
June 27th, 2012 at 8:44 amHi jayhan,
yeah, there’s a demo. Easily go to http://kevinw.de/greenbird/ using Google Chrome and scroll down a bit.
Regards Kiwi
June 28th, 2012 at 11:03 amHi Kiwi, I realize that you have this “left:10px” property at the #wrapper id. I think if you remove it, the problem will solve. Please give it a try.
June 29th, 2012 at 9:59 amHey jayhan,
June 29th, 2012 at 12:20 pmthis solves the problem, thank you
Hi Jayhan,
July 27th, 2012 at 1:04 pmI like the way you achieved this with a solution so simple and clean. I’ve tried other solutions which were over-complicated, I think. This worked very well for me, Thanks!
Excellent tutorial but for people who have an elementary knowledge of coding…for the rest of us can you create video of how-to-do it???
July 30th, 2012 at 10:20 pmOkay, I love the demo. I tried to add the code to my website with a few changes, but it is not working. Do I have to name the navigation (nav)? Currently, I have my nav called #navigation. And also instead of scrolling, can I have it to stick when the user click on the navigation button? Let me know. Any help will be greatly appreciated.
August 2nd, 2012 at 1:46 pmHi Lia,
No, as long as you target it to the #navigation, it will work. Not so sure about your second request, maybe it can work.
August 3rd, 2012 at 7:43 amOkay, I got it to work. Disregard the second request. I have one more question. I will also like the header along with the navigation to stick on the top. How can I accomplish this?
August 6th, 2012 at 4:56 pmLoL. Disregard the last request. I got it to work. Thank you.
August 6th, 2012 at 5:01 pmHi Jayhan.
I’ve tried this for an hour, and I’m not good enough on jQuery to solve the problem.
The problem is that I’ve got an div around nav but cant that div to be fixed.
So it will be relative and stay on top..
Home
Work
Journal
Contact
Any suggestions how to solve the problem?
August 6th, 2012 at 11:47 pmThe code is like this
thx!
Home
August 6th, 2012 at 11:49 pmWork
Journal
Contact
Hi Ante, I’m sorry but could you post your code at online editor like JSFiddle or JSbin?
August 7th, 2012 at 2:21 amI think this will be right, http://jsbin.com/welcome/9180/edit
August 7th, 2012 at 12:55 pmAnd it can be little hard to read the css, its build on sematic.gs & lessees!
This is a mess in IE8.
September 18th, 2012 at 5:30 am[...] ● Simple Smart Sticky Navigation Bar [...]
September 28th, 2012 at 4:58 am[...] ● Simple Smart Sticky Navigation Bar [...]
October 5th, 2012 at 8:49 pmBreaks on Android 4.1 smartphone tested using Google Nexus S. Bug happens when you zoom in on page and scroll down below the header, and scroll to the right, the fixed navigation bar slides completely off the page to the right. I wish there was a fix to this because I would really like to use this great navigation bar.
October 16th, 2012 at 8:56 pm^ Fixed bug by adding the following css .fixed{left: 0;}
October 17th, 2012 at 3:48 am[...] Basit Akıllı Yapışkan Gezinti Çubuğu [...]
October 19th, 2012 at 7:11 pm[...] Simple Smart Sticky Navigation Bar [...]
November 2nd, 2012 at 3:30 ami cant seem to get this to work. I’m very new to jquery and cant seem to get my #nav div to stick.
Can anyone try and help me figure this out?
November 6th, 2012 at 8:39 amHello!!
Does this work with the jquery scrollto function – or is there a way I can add a scroll effect using the code in your tutorial? I’m trying to creating the sliding effect when you click one of the navigation buttons – but can’t seem to get it to work.
My site is http://www.forevaeva.com
Many, many thanks!
Ellen
November 12th, 2012 at 7:31 pmHi ellen, it will work with the sliding effect. Try this snippet: http://css-tricks.com/snippets/jquery/smooth-scrolling/
November 28th, 2012 at 4:26 pmJayhan! Wow and thank you – my question is that for older browsers and my purchased blog template to work, the CSS for nav and header and content are locked in pre-HTML5 div id’s. I see you’re going right to HTML5 with “nav” as the tag – how do I change the javascript code to work on my antique div id’s?
And you are incredible for keeping up with our questions almost a year!
December 10th, 2012 at 6:30 pmHi Jayhan SIm,
I am doing a left hand navigation with this feature – but when I scroll to the bottom of the page is there a way to implement a footer command to disable the fixed once the footer is loaded / seen / ran into?
- Cody
December 20th, 2012 at 10:32 pmhas anyone a solution for mobile browsers? The problem with this approach is that is looks ugly on them, because the $(window).scroll() -event is only fired when the window STOPPED scrolling. And this is when the navigation-bar is “hopping” from outside the view of the middle of the page (depending on your scroll-direction) onto the top of the page.
Most frameworks have a fixed menu-bar from the start on – then it’s no problem. I am not even sure if there is a solution for this?
December 21st, 2012 at 6:05 pmHi CeeJay, I think my solution doesn’t act well in the mobile browsers.
December 24th, 2012 at 3:33 pmNot sure if it is a browser issue, using Safari 6.0.2, but the demo is jerky with the navigation bar appearing to ‘jump’ into position at the critical point.
Is there a way to smooth this out?
December 31st, 2012 at 11:17 am[...] Simple Smart Sticky Navigation Bar [...]
January 1st, 2013 at 9:09 pmGracias, aprendí demasiado! excelente pagina web
February 11th, 2013 at 8:32 pm[...] Sticky navigation bar [...]
February 28th, 2013 at 9:30 am[...] Simple Smart Sticky Navigation Bar [...]
March 4th, 2013 at 7:05 amThanks a lot
April 30th, 2013 at 12:23 pmHi Jay,
I tried your code but this page http://www.odonnelldentistry.com/contact.html looks like it’s jumping. How do I fix it. And the rest of the site like this one http://www.odonnelldentistry.com/index.html is not scrolling smooth like your demo. Any suggestions?
April 30th, 2013 at 1:17 pmHi casa, I checked your site, your homepage nav bar is looking fine. But the contact page, it does not stick?
April 30th, 2013 at 4:02 pmHi Jayhan
I’m working on this and can’t get it to work: http://www.diabloproof.co.uk/jbanks
The header div id is “header” and my nav bar id is “menu-wrapper”. I’ve put the code in as this (just before the tag):
$(document).ready(function() {
//Calculate the height of
//Use outerHeight() instead of height() if have padding
var aboveHeight = $('header').outerHeight();
//when scroll
$(window).scroll(function(){
//if scrolled down more than the header's height
if ($(window).scrollTop() > aboveHeight){
// if yes, add "fixed" class to the
// add padding top to the #content
// (value is same as the height of the nav)
$('menu-wrapper').addClass('fixed').css('top','0').next()
.css('padding-top','60px');
} else {
// when scroll up or less than aboveHeight,
// remove the "fixed" class, and the padding-top
$('menu-wrapper').removeClass('fixed').next()
.css('padding-top','0');
}
});
});
but I just can’t seem to get it working, have I missed something??
Any help appreciated
May 2nd, 2013 at 5:14 pm