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

Related Posts