How to Create Sticky Navigation with CSS or jQuery

In the modern web, more websites use the “sticky” position feature in their main navigation or menu. It is making the main navigation stick and remain visible as the user scrolls on the page thus making it more accessible.

Some of the best examples that use this feature are Facebook and Designmodo. As you scroll down the page, the main navigation will remain at the very top and will not move.

While there are lots of jQuery plugins we can use to create a sticky navigation, it can be done in just a few lines of jQuery and CSS codes. In this tutorial we’re going to look on how we can create a sticky navigation both jQuery version and a CSS only version. Let’s start.

What you need on this tutorial:

Basic Knowledge about CSS

Basic Knowledge about jQuery

Time and Patience

jQuery Version

In this part of the tutorial, we’re going to use jQuery to manipulate the DOM and add a class to make the main navigation sticks at the top of the page when a certain point was reach. I assume that you’re already familiar with HTML5 elements and we’re going to use some of them in our markup.

The Markup

For our markup, we’ll create a header that will hold our hero-like unit content with a class of demo-nav and then followed by our main navigation with a class of main-nav which includes a series of links for main menu. We’ll then set up our content and wrap them in a class content. We will use lorem ipsum site as our dummy text.

Now let’s move on to our header and main navigation. We’re going to have to give our navigation bar a position relative. Make it 68px tall and set a width of 100 percent. Let’s also give it a border on the bottom that is 1px thick, and set up more styles on links and some arbitrary padding.

Next, we will create special class and will name it stickytop and give a position fixed. This will handle our sticky navigation later on our jQuery code.

nav.main-nav.stickytop {
position:fixed;
top:0
}

Let’s move on to the main content area. For our content area we will give it a padding of 50px and set a multiple column of three. The CSS3 multi-column layout enables the set up of multiple columns of text just like a newspaper column. The column-gap will handle the size of gap between columns.

The Script

To create a floating sticky main navigation effect, we’ll use an anonymous function to trigger an event at a certain point where we want to make the main navigation sticks.

Note: Since we are using jQuery, don’t forget to link a jQUery library on the <head> section either via Google Hosted Libraries or manually put the jQuery.js file inside your js folder .

In our code below when $window.scroll() stops at 290 it will add a class stickytop to our main navigation otherwise we will set up another else statement to remove it if it doesn’t reach that certain point.

Try it now and add the following jQuery codes just before the closing </body> tag. Make sure you wrap the code inside the <script></script> tags.

Another CSS Sticky Way

For Chrome users, webkit introduced a new position value called sticky that creates the same effect like the jQuery code we’ve used above. However this is not yet enabled by default. I would suggest reading this article to learn more. You can check this caniuse site for support.

Conclusion

That’s it! In this tutorial I’ve shown you how you can create your own sticky navigation using plain jQuery and CSS. Feel free to improve the code presented above and if you have questions, comments or suggestions drop me a line in the comments.

Download Sticky Navigation: CSS and jQuery

Sam is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and WordPress.

Note the jQuery version is very unperformant. Every scroll step will trigger a whole page reflow (calculate the layoug of all element). You could consider checking how much time has passed since you last checked whether to move to fixed and make sure you don’t do it too frequently. Also note that when you move the header to fixed position the whole page shifts a little. You should add a padding element to the page with the same height as the header when you set the header to fixed to avoid the issue.