to create sticky header on scroll with jquery and cool css transitions you will need a little jQuery code like this:
add this code inside your <head></head> like this:
<head>
<script type="text/javascript">
jQuery(document).ready(function() {
$(window).scroll(function() {
var sticky = $('#header'),
scroll = $(window).scrollTop();
if (scroll > 50) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
});
</script>
</head>
and a jQuery Script should you put in the header, paste this on inside your <head></head> like this:
<head> <!-- Your Code Before --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head>
a full example:
<head>
<!-- Your Code Before -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$(window).scroll(function() {
var sticky = $('#header'),
scroll = $(window).scrollTop();
if (scroll > 50) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
});
</script>
</head>
and paste this css to Create Sticky Header on Scroll With jQuery and Cool CSS Transitions on your css file:
/*----------------------------
Sticky Header CSS
-----------------------------*/
#navbar{
width:100%;
height:45px;
line-height:45px;
background:#FFF;
margin:0 auto;
}
#navbar a{
text-decoration:none;
color:#5AA628;
}
#navbar ul li{
list-style:none;
float:left;
display:block;
padding:0 15px;
}
#header{
width:100%;
line-height:35px;
display:block;
background:#01ACE2;
margin:0 auto;
}
#header a{
font-family:Arial, Helvetica, Serief;
color:#FFF;
font-size:14px;
padding:0 15px;
text-decoration:none;
}
.fixed#header{
width:100%;
position:fixed;
top:0;
left:0;
background:#FFF;
line-height:60px;
border-top:4px solid #01ACE2;
box-shadow:0px 1px 5px #999;
transition:all 0.7s ease 0s;
-webkit-transition:all 0.7s ease 0s;
z-index:100;
}
.fixed#header a{
color:#01ACE2;
font-size:24px;
}
following is a HTML Code to Create Sticky Header on Scroll With jQuery and Cool CSS Transitions:
<div id="main"> <div id="navbar"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> <div id="header"> <h1><a href="#">Home</a></h1> </div> </div>Live Demo that i create on JS fiddle just like that, i hope this tutorial will help you to Create sticky header on scroll with jquery and cool css transitions. if you need help, you can leave a comment below.
