Create Animated Sticky Header With CSS 3 136

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>
 
Job Oriented Diploma Programme for Graduate & Undergraduate Students

Join Job oriented computer Diploma programme and learn practical skills from industry experts. Join the best.. Be Ready for Industry..


Infonic Training & Development Center