How to Create a Sticky Navigation with CSS3 & jQuery

You know CSS3, right? It’s that thing that makes all those beautiful and amazing things on the web and makes Flash want to run away and hide. Yeah, that’s CSS3.

And I’m more than sure you have heard about jQuery. If you haven’t, well, it’s a kind of library where you cannot borrow any books, but it allows you to do other stuff and bring some additional magic to the web.

Anyway, I ended up mixing those two which resulted in this cool effect. I found it really useful and hope you will too, as you can use in on almost every website that has some sort of menu – and let’s face it, most do.

Tutorial On How To Create a Sticky Navigation Bar

The video below will show you what you’ll be making and how to do that. Unfortunately, since I had only 5 minutes for this, I focused only on the jQuery part. Everything else you need for this you will find in the tutorial below.

The .default and .fixed classes are very important to us. They will change the look and position of our menu; the former is responsible for how the menu looks at the beginning and for its position in the browser window, the latter is responsible for where the menu goes after we kick it out from its original position and how it looks then.

CSS3 Extravaganza

Now for the fun part :)! Let’s go from the top to the bottom through our CSS soupe and add some CSS3 sugar accordingly:

Simple as it is. We’re adding linear gradient, going from the top to the bottom vertically. Our gradient consists of three colors, color-stop simply tells the browser where that particular color should stop and the next one begin.

The gradient for browsers based on Gecko engine:

background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);

The same as above, only we don’t have to be specific about where each color stops, because it looks great as it is already.

The transition-property determines which properties fall under the transition, in our case it will be color along with background. The transition-duration determines how long the transition should last, it will be 0.5s for color and 0.5s for background accordingly.

jQuery Magic

All our code should be executed after the DOM is loaded. For that we’ll use this great method jQuery has, called .ready(). You’re probably familiar with the long notation:

$(document).ready(function() {
// all our code will go here
});

But this time let’s use the short notation, which does exactly the same thing:

$(function(){
// all our code will go here
});

Now, first thing we should do, is to grab our menu (which is a div with ID “menu”) and assign it to a variable, because we’ll use it several times. The same goes for its position, and for that we’ll use jQuery’s .offset() method which, unlike .position() method, returns the position of the element we use it on relatively to the document, not to the offset parent. Let’s do it:

var menu = $('#menu'),
pos = menu.offset();

Next, we need to listen for the scroll event, so every time we scroll the page up or down something happens:

$(window).scroll(function(){
// code here
});

Now we need to check if we scrolled down so far that our menu is not visible anymore. This point is exactly the position of our menu from the top + its height. We also need to check if the menu is now in its default position and has the default look:

Right now the effect works only in 50%; it fades out when you scroll down and then it reappears at the top of your browser window – but it doesn’t return to its original position and size when you scroll back up. Let’s fix it now.

For this we need another if statement. This one will be the exact opposite of the first one we made, so:

If the result of our statement is true, we want the menu to fade out again, remove the .fixed class and give it a class of .default this time, and then we want it to fade back in, so it’s visible to us:

After Word

With a little customization you can easily tweak the whole thing to your liking and/or need, which makes this little effect very useful. Combine it with CSS3 and you’re done :). That’s it guys! If you have any questions, feel free to ask in the comments, I’ll do my best to answer them. Cheers!