Sticky header on scroll with jQuery and CSS

You must have seen the sticky headers in modern web designs. In most of the cases, it is used to make the navigation menu sticky. Initially, you have some information in header which is followed by a navigation menu. Once you start to scroll, the header goes out of display area and the navigation menu becomes sticky and gets fixed on the page top. As you scroll up, it comes down and header appears again. It looks really great and is navigation friendly also.

Today, we will learn how to create this cool sticky navigation menu effect with jQuery and CSS. We will use jQuery waypoints plugin here to achieve this functionality. Also, for better understanding of the core concept, we will keep this tutorial as simple as possible.

sticky-navigation

I have created a simple page with sticky navigation in this tutorial. Before we start, just have a look, what we will be building at the end of this tutorial.

Sticky Navigation on Scroll Demo

As you can see in the example, we have a navigation menu which we always want to display. Once the header part scrolls up, it becomes sticky.

HTML Markup

We will start with the HTML markup. If you wish, you can download the complete set of files which is available in a zip folder at the end of this tutorial. Here is the HTML mark-up inside the <body> tag which is pretty simple and clean.

<body>
    <div>
        <div>
            Your Header Here</div>
        <div>
            <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <div>
            Scroll Down
            <br /><br /><br /><br />
            Scroll Down
            <br /><br /><br /><br />
            Scroll Down
            <br /><br /><br /><br />
            Scroll Down
            <br /><br /><br /><br />
            Scroll Down
            <br /><br /><br /><br />
            Scroll Down
            <br /><br /><br /><br />
        </div>
        <div>
        Your footer here
        </div>
    </div>
</body>

As you can see, we are putting everything inside a div with “container” class. The only purpose of doing this is to centrally align all our contents. We will discuss it once we look at the CSS part. Below the header, we are keeping the navigation menu inside a div with “sticky-navigation” class. To keep the HTML markup cleaner, we are putting all the hyperlinks as unordered list. This is the navigation menu which we want to make sticky. After this, there are two more divisions with content and footer class respectively. In contents, we are simply keeping some text so that the web page becomes longer enough to scroll. The footer menu is just to indicate that we have reached the end of the page. Anyway we are not much bothered about the contents and footer here!

Including the jQuery and Waypoints

For this effect to work properly, you need to include the jQuery, Waypoints and Waypoints-sticky files to the html file inside the <head> section. These are all available as the part of download package.

<head>
    <title>Sticky Header on Scroll with jQuery</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script src="jquery.min.js"></script>
    <script src="waypoints.js"></script>
    <script src="waypoints-sticky.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.sticky-navigation').waypoint('sticky');
        });
    </script>
</head>

Apart from including the three JavaScript files, we are also linking our external style sheet here. Important thing to note here is the JavaScript code. In almost all the cases, you want your jQuery functions to execute after the page finishes loading. The $(document).ready() does exactly the same. Inside it, we are targeting the sticky-navigation class with a dot (.) prefix just as we do in CSS and defining it as a sticky waypoint element. Very simple, but make sure you don’t make any mistake here; otherwise the effect will not work!

Sticky header CSS file

Now let’s have a look at our CSS files. I will not explain about the sections where there is nothing special.

.container
{
    width: 600px;
    margin: 0 auto;
    text-align: center;
    background-color: #B0CEFF;
}
.header
{
    padding: 100px 0px 100px 0px;
    font-size: 60px;
    color: #666666;
    background-color: #FFFFFF;
}

In the container class, the only thing worth discussion is margin: 0 auto. As you will know that the top and bottom margin here is defined as zero whereas left and right margin as auto. We define the margin as auto to make the division centrally aligned. For more information, you may like to go through my layout with CSS tutorial.

.sticky-navigation
{
    padding: 10px;
    background: #666666;
    color: #FFFFFF;
    font-size: 18px;
    width: 580px;
    text-transform: uppercase;
}
.sticky-navigation.stuck
{
    position: fixed;
    top: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

You can see that there is nothing special in sticky-navigation class. We are defining the position as fixed in sticky-navigation.stuck and top as zero. This is required to fix the sticky-navigation items to the top without any gap with the browsers border. If you wish to provide any gap here, increase the value of top property accordingly. The last thing we are doing here is to provide a light box-shadow just below the navigation menu with CSS3 box shadow property.

The next lines of codes are for defining how the items will be displayed inside the sticky header box.

.sticky-navigation ul
{
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: #808080;
    padding: 5px;
    list-style-type: none;   
}
.sticky-navigation ul li
{
    display: inline;
    padding: 10px;
}
.sticky-navigation a
{
    padding: 5px;
    color: #FFFFFF;
    text-decoration: none;
}
.sticky-navigation a:hover
{
    background: #999999;
}

Again nothing special here and the CSS code is self explanatory. You have the option to set your style, colors, etc. as per your needs.

So guys, this is all for creating a beautiful sticky navigation menu! Go ahead, implement it in your website and create some wonderful effects to amaze your visitors.

The files used in this example are available in a zip folder to download here. Go ahead, grab it now!

Download Sticky Header on Scroll Files

Tagged on: ,

21 thoughts on “Sticky header on scroll with jQuery and CSS

    1. Gunjesh Kumar Post author

      Hi Josh, I went through your website but could not find the required CSS codes. Have you added the following codes in your CSS?
      .sticky-navigation.stuck
      {
      position: fixed;
      top: 0;
      }
      Try to include the code in the html file itself for testing. Once it works, you can shift it to any external CSS file.

  1. Klara

    Hi Gunjesh,

    I wrote to you few weeks ago but I have not heard anything back yet.
    I tried to follow your article on “Sticky header on scroll with jQuery and CSS” and I managed to make it working fine when using just the simple header, but my future website is using the Parallax scrolling at the same time and then the things get a bit complicated. The sticky header does not work for me :(

    Could I maybe send you my code and ask you for advise as I can not work out where it’s failing. The page is still under construction, therefore not online yet.

    Thanks for getting in touch.

    The very best regards Klara

    1. Gunjesh Kumar Post author

      Sorry Klara for replying late, was a bit busy recently.
      Both sticky header (waypoints) and the parallax effect uses jQuery. There can be some conflict between them.
      You may send me the codes. Let me see if I can resolve the problem.
      Cheers!

      1. Klara

        Hi, Thanks for the reply, I have just sent it to you on your gmail. Also many thanks for your help and sharing this tutorial :) It’s a great work! Regards :)

  2. Jeroen

    I’ve been looking around for a simple yet effective script for this effect, and thanks to you I’ve found it. Thanks for the post! Keep it up.

  3. Manuel

    Hi guys

    thanks for your tutorial. nice work. To be honest, i am not quite happy with the stickyness on mobile devices – such as apple iphone, iPad,…

    The main malfunction is: the action of the the stickyness changes just after the scrolling of the screen stopped. why is that? The answer is quize simple: as soon as there is an input on your iDevice, no further actions are proceeded in the dom until the input (interupt) stops.

    in fact: the sticky header is sticky when leavibg the default header-height in your browsers viewport, but it shakes when the action is released. this isn’t even fixed in jQuery mobile or other frameworks. still: there is a bunch of ideas you could follow to more or less solve the problem:

    put a layer to your page, which is transparent, covering the whole page. i.e:

    in html: div(class=layover)
    in css:

    .layover {
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    top:px;
    height:100%;
    z-index:9999;
    }

    put a js eventhandler on it to prevent default actions, such as touchmove, swipe, tap,…
    set it as a dragable element. use drag-events to simulate the scroll of your page. handle this (direction and speed[distance/time in ms) with scrollTop(px, speed)

    maybe this might help you solving the problem.

    another idea is to just set a smooth transition, keeping the real height as relative element, fading in a layer i.e. with slideDown() (as fixed, top 0px, height) – then, even if delayed, your layer doesn’t jump the way it does in your example listed above.

    maybe these ideas might help you to find a perfectly working -> smooth stickyheader.

    aloha

      1. michael c

        That is a very big hack though just to get it working. You are practically re-inventing the whole browser experience, events etc. I would have thought you would want to try do do it the other way around. Say perhaps with some kind of scroll event and listener.

  4. Pingback: Sticky fixed header with different contents | BlogoSfera

  5. Mani Sheriar

    Thank you so much for this! :)

    What if I have a tall header with lots going on and I want to have a link in it that allows the user to quickly scroll to the sticky navigation and bypass the actually scrolling past the header part?

    Thanks!!

  6. Julian Dik

    Hey Gunjesh,
    I’m trying to run this but it wont work. Can you explain me this?:

    .menu is my navigation class which should be sticked. So I wrote in between head:

    $(document).ready(function () {
    $(‘.menu’).waypoint(‘sticky’);
    });

    and in css:
    .menu.stuck {position: fixed;
    top: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);}

    Is that right? Thank you!

    1. Gunjesh Kumar Post author

      Hi Julian,

      It looks alright. You may like to view the source code of Demo page to compare and see why it is not working.
      One more important not here – you must declare < !DOCTYPE html> in the beginning.

  7. Pingback: Sticky Headers- Challenges, Considerations and How to create one?

Leave a Reply