how to make sticky header

Table Of Contents

We can create Sticky header with 3 steps

The word “Sticky” Header is a term generally used for header which is fixed at the top even when user scroll down. The sticky header always remain visible. let me show you how to fix header on scroll.

1. Create HTML

Let’s create a html file index.html or header.html. In HTML we will create a div and this DIV is parent for header. All the elements under header we will put under this DIV.

<div id="header" class="big_header"> <p>TalkersCode Sticky Header</p> </div>

2. Create style from css

.big_header
{
top:0px;
position:fixed;
width:100%;
background-color:#084B8A;
color:white;
font-size:40px;
z-index:2;
transition: all 0.3s ease;
}
.sticky_header
{
font-size: 17px;
}

Here We’re are using two classes for header one in .big_header and other is .sticky_header big_header we are using when user doesn’t start scrolling. Once user start scrolling then sticky_header class will add from Javascript. We will see that in next step.

3. Add Javascript Code

$(window).scroll(function()
 {
 if ($(this).scrollTop() > 1)
 {
 $('#header').addClass("sticky_header");
 }
 else
 {
 $('#header').removeClass("sticky_header");
 }
 });

In this code, We are adding a condition on window.scroll(). When user scroll to more than 1 px this script will add class sticky_header on DIV where DIV is header and Rest our CSS code will do all

You can download this script