Krishna Tower, Heera Nagar Mode, Ajmer Rd, DCM, Jaipur
infonicsolutions@gmail.com+91-8306599033

Create Animated Sticky Header With CSS 3

Create Animated Sticky Header With CSS 3

In this CSS3 tutorial we will show you how to make a attractive animated sticky header for your website with HTML5, CSS3 and Simple Jquery code.

we can create this header with CSS3 property position fixed but for make attractive and animated we will use CSS3 property position sticky for this.

[step:1] At beginning We will link CSS File In Head Section. Here “style.css” Is Our CSS File Name.
[step:2] Create A Div With A Class wrapper.
[step:3] After Class wrapper Start header tag.
[step:4] After header tag Create A div With Class container.
[step:5] Create Another Div With Class logo.
[step:6] Start HTML5 nav Tag For Creating header menus.
[step:7] link jquery cdn File Here With Following Path.

<html>
<head>
<title>Animated Sticky Header Tutorial By - Infonic Training </title>


<link href="style.css" rel="stylesheet">
</head>

<body>


<div class="wrapper">
  <header>
   
<div class="container">
     
<div class="logo"><img src="infonic-logo.jpg" alt="Infonic">
       </div>

      <nav>
                    	 <a href="#">Home</a>
                         <a href="#">About Us</a>
                         <a href="#">Courses</a>
                         <a href="#">Contact</a>
                         <a href="#">Tutorial</a>
      </nav>

 </div>


</header> 

</div>


<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>

</body>
</html>

Style.css File Starting Here
CSS:-

body{ margin:0px; padding:0px;} 

.wrapper{ width:100%; height:auto; overflow:hidden; margin-bottom:100px; min-height:2000px;}

header{ transition:all 0.5s ease;}
header{ width:100%; height:80px; line-height:80px; background-color:#F93; color:#fff; position:fixed; top:0px;}


.container{ width:80%; margin:0 auto;}

.logo{ float:left; margin:10 0px;}

.logo img{ width:100px;}

nav{ float:right;}

nav a{ color:#fff; text-decoration:none; font-size:18px; margin:0 15px; background-color:#39C; padding:5px; border-radius:10%;}

nav a:hover{ color:#60C}

header.sticky { background:linear-gradient(255,120,0,0.1); height:70px; line-height:70px;}

header.sticky .logo img{ transition:all 0.5s ease; width:70px; margin:5 0px;}

header.sticky nav a{ font-size:16px;}

div{ text-align:justify;}

Start Jquery Simple Code Here
Jquery:- When we scroll our webpage this function start working. if the webpage is scroll from the top with 1px a class sticky is added in header tag else if our webpage is not scroll then class sticky is removed from header tag.

<script>
  $(document).on('scroll',function() {
	 if($(this).scrollTop() > 1)
	 {$('header').addClass('sticky');
	 } 
	  else{ $('header').removeClass('sticky');}
  });
 </script>

 


MASTERS IN DIGITAL MARKETING

For Professional & Job Seeker

Learn how to market a business online just like experts & agencies do it.
Learn form real practitioners not just trainers


Infonic Training & Development Center



About the author

Infonic