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.

Unheap

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.


<header>
<h1>Creating <span>Sticky</span> Navigation</h1>
<nav class="demo-nav">
        <a href="index.html" class="active">Using jQuery</a>
        <a href="index2.html" >Using CSS</a>
    </nav>
</header>
<nav class="main-nav">
<div class="container">
 <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Profile</a>
  <a href="#">Contact</a>
  </div>
</nav>
<div class="content">
<h2>Main Content Here!</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

As you can see, nothing is special on our markup just a few HTML5 tags and classes.

The CSS

Now let’s give our markup some life. We’re going to apply basic styles to our base elements such as the body, header tags, header navigation and so on.



body {
    font:16px/1.5 'Raleway',Arial,sans-serif;
    color:#fff;
    margin:0;
    padding:0
}

h1 {
    font-size:50px;
    font-weight:300;
    text-align:center;
    font-weight:700
}

span {
    color:#27ae60;
    font-weight:700
}

h2 {
    font-size:35px;
    text-align:left;
    margin-left:-20px
}

nav.demo-nav {
    width:350px;
    margin:0 auto;
    display:block
}

nav.demo-nav a {
    font-size:19px;
    display:inline-block;
    text-align:center;
    font-family:'Lato',sans-serif;
    color:#27ae60;
    font-weight:400;
    padding:5px 15px;
    text-transform:uppercase;
    border-radius:2px;
    letter-spacing:1px;
    text-decoration:none;
    margin-right:10px;
    border:2px solid #ecf0f1;
    border-radius:none
}

nav a.active,nav a:hover {
    background:#ecf0f1;
    color:#27ae60
}

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.


header {
    height:250px;
    background:#2ecc71;
    padding:23px 0
}

nav.main-nav {
    background:#fff;
    height:60px;
    border-bottom:1px solid #dadada;
    text-align: center;
}

nav.main-nav a {
    font-family:'Lato',sans-serif;
    font-size:20px;
    text-decoration:none;
    display:inline-block;
    padding:15px 19px;
    color:#27ae60;
}

.container {
    display: inline;
    margin:0 auto;
}

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.



.content {
    color:#222;
    padding:50px;
    -webkit-column-count:3;
/* Chrome, Safari, Opera */
    -moz-column-count:3;
/* Firefox */
    column-count:3;
    -webkit-column-gap:40;
    column-gap:40px;
}

.content h2 {
    margin:0;
}

As a final step, add some media queries on the header and main navigation as well as the container of our main navigation and content to make them responsive on smaller devices.


@media all and (min-width: 360px) and (max-width: 480px) {
    header {
        padding:5px 0 55px;
    }

    nav.main-nav a {
        font-size:17px;
    }

    nav.main-nav {
        height:55px;
    }

    .container {
        margin:0 auto;
        width:50%;

    }

    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1;
    }
}

@media screen and (max-width: 480px) {
    header {
        padding:5px 0 55px;
    }

    nav.main-nav a {
        font-size:17px;
    }

    nav.main-nav {
        height:55px;
    }

    .container {
        width:92%;
    }

    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1
    }
}

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.


$(function(){
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 290) {
            $('nav.main-nav').addClass('stickytop');
        }
        else {
            $('nav.main-nav').removeClass('stickytop');
        }
    });
});

CSS Version

Now that we’ve seen how to create a sticky navigation via jQuery let’s now look on how we can create this via CSS only.

The Markup

Just like the markup used on our jQuery example, we will use exactly the same markup but the position of the header and our main navigation will switch using CSS.



<header>

<h1>Creating <span>Sticky</span> Navigation</h1>


<nav class="demo-nav">
        <a href="index.html" >Using jQuery</a>
        <a href="index2.html" class="active">Using CSS</a>
    </nav>

</header>



<nav class="main-nav">

<div class="container">
 <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Profile</a>
    <a href="#">Contact</a>
  </div>

</nav>



<div class="content">

<h2>Main Content Here!</h2>




Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum


</div>

The CSS

We have almost the same CSS like the jQuery example above except for the nav.main-nav class since we will need to add a position fixed on and add some positioning CSS. Check out the CSS below.


nav.main-nav {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

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




Related

About The Author

Sam Norton

6 Comments

  1. Andor Nagy Jun 3, 3:15 pm
  2. Gabriel Jun 4, 3:36 am
  3. Kimberly Wright Jun 9, 6:23 am
  4. Owen Jun 5, 6:27 pm
  5. Rodel Kross Jun 16, 10:06 am
  6. Daan Schaeffer Jun 23, 11:20 am