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

I hope this tutorial will help you to display important notifications, 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 Header on Page scroll using CSS3

CSS3 Code for Sticky Header

#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

<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!

Demo 1 – Blue Demo 2 – Red Demo 3 – Green

If you enjoyed this article, Get email updates (It’s Free)
Sticky Notification/ Information / Message Header Bar using CSS3http://w3lessons.info/wp-content/uploads/2014/02/Colorful-Stickey-Header-using-CSS3.pnghttp://w3lessons.info/wp-content/uploads/2014/02/Colorful-Stickey-Header-using-CSS3-150x150.pngKarthikeyan KCSS3CSS3,scroll div,tips & tricks
In this tutorial, I am going to explain you how to create sticky header on page scroll using CSS3.I hope this tutorial will help you to display important notifications, informations to visitors/users whoever landing your webpage. I am sure that it will attract your visitors as well.I am implemented...