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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>