Sticky Header on Page Scroll using CSS3

In this tutorial, I am going to explain you how to create sticky header on page scroll / fixed header on scroll using CSS3.

I hope this tutorial will help you to display important notification message , informations to visitors/users whoever landing your webpage. I am sure that it will attract your visitors as well.

I am implemented such a way that developers can easily change the background color of the sticky information bar. Currently I have used 3 colors, their class names are .w3_blue, .w3_red & .w3_green

Colorful Sticky Fixed Header on scroll using CSS

CSS Code for Sticky Fixed Header On Scroll

#w3_sticky_bar {
height: auto;
text-align: center;
width: 100%;
_width: expression(eval(document.body.offsetWidth-20));
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 999999;
position: relative;
overflow: hidden;
font-size: 17px;
font-weight: 600;
white-space: normal;
font-family: Helvetica,Arial,sans-serif;
}

#w3_sticky_bar span {
margin-left: 65px;
margin-right: 20px;
margin-top: 13px;
display: inline-block;
font-size: 17px;
line-height: 25px;
}

#w3_sticky_bar a.w3_button {
border: 1px solid #000;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
border-radius: 4px;
margin-left: 10px;
text-decoration: none;
color: #fff;
white-space: nowrap;
background-color: #000000;
padding: 6px 15px;
line-height: 45px;
margin-right: 60px;
}

.w3_red {
background-color: #CB0C1F;
color: #fff;
border-bottom: 1px solid #ccc;
}

.w3_green {
background-color: #569625;
color: #fff;
border-bottom: 1px solid #ccc;
}

.w3_blue {
background-color: #336699;
color: #fff;
border-bottom: 1px solid #000;
}

#w3_sticky_bar_container .remains_at_top {
position: fixed;
top: 0;
}

#w3_sticky_bar_container {
border: medium none;
height: 40px;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 17000;
}

#w3_sticky_bar_pusher {
height: 30px;
position: relative;
overflow: hidden;
}

HTML Code for Fixed Header On Page Scroll

<div id="w3_sticky_bar_container" class="remains_at_top" style="height:58px;">
<div id="w3_sticky_bar" class="remains_at_top w3_blue"> <span> W3lessons.info is the popular web2.0 techonology blog, delivered to over 4500 web professionals</span> <a class="w3_button" href="http://feedburner.google.com/fb/a/mailverify?uri=nextweb2&loc=en_US" target="_blank"> Subscribe </a>
</div>
</div>
<div id="w3_sticky_bar_pusher" style="height: 53px;"></div>

I hope you will like this tutorial. You can use this code in your live projects.

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!

 

 

Posts you may also like

You May Also Like

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

4 thoughts on “Sticky Header on Page Scroll using CSS3”

  1. Hi Karthikeyan,

    Thank you for this one, it’s cool, I am always reading your post, learning lot from you, I tried you :

    Sticky Header on Page Scroll using CSS3

    BUT it looks like when you scroll down in Chrome the sticky header disappear up.

    THanks.

    Reply

Leave a Comment