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

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

• CSS Image Hover Effects
• New Gmail Account Login & Registration Form with Material Design and jQuery
• Simple jQuery Preloader for Websites
• Responsive Pinboards using CSS3
• Top 5 Material Design Frameworks in 2020
• Free Responsive Navigation Menu using CSS and jQuery
• Top 10 jQuery & CSS3 Tutorials on How to Animate Icons
• Animated Sliding Facebook Like Box using Pure CSS3
• Table Design with Icons on Hover using CSS & jQuery
• Sticky Header on Page Scroll using CSS3