Sticky Header animation effect using jQuery | Sticky Navbar effect using HTML CSS and jQuery

This tutorial blog to learn how to create Sticky Header or navbar with sliding effect using jQuery.

Video tutorial of Header animation effect using jQuery

This tutorial video to learn how to create Sticky Header or navbar with sliding effect using jQuery.

Header animation effect using jQuery [Source Codes]

This source code can help you to create Header animation effect using jQuery

jQuery library source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<header class="header">
	<div class="container">
		<a href="#" class="logo">LOGO</a>
		<nav class="main_nav">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
	</div>
</header>
<div class="banner">
	<div class="overlay"></div>
</div>
<div class="body_wrap">
	<div class="container">
		<div>
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</div>


<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	line-height: 1.4;
	background: #fff;
	color: #000;
}

.header{
	padding:30px 0;
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 10;
	transition: all 0.1s ease-in-out;
}
.header.fixed{
	opacity: 0;
	transform: translateY(-50%);
}
.header.active {
	transition: all 0.4s ease-in-out;
	background: #024E73;
	padding: 20px 0;
    opacity: 1;
    transform: none;
}
.container{
	max-width: 1200px;
	margin:0 auto;
	padding:0 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logo{
	font-size: 40px;
	color: #fff;
	text-decoration: none;
	color: red;
	font-weight: 700;
}
.main_nav ul{
	padding: 0;
	margin:0;
	list-style: none;
}
.main_nav ul li{
	display: inline-block;
	margin-left: 25px;
	font-family: "Montserrat",sans-serif;
}
.main_nav ul li a{
	text-decoration: none;
	color: #fff;
	font-size: 18px;
	transition: all 0.3s linear;
}
.main_nav ul li:hover a{
	color:#f00 
}
.banner{
	background: url('../images/banner.jpg') no-repeat center top;
	background-size: cover;
	height: 100vh;
	position: relative;
}
.banner .overlay{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background:linear-gradient(to right bottom,rgba(7,12,18,0.9) 50%, rgba(5,90,132,0.94) 100%);
}

.body_wrap{
	padding:50px 0;
	font-size: 18px;
}
.body_wrap h1{
	font-family: "Courier";
	font-size: 50px;
}

JavaScript Code

Copy

$(window).scroll(function() {
	if($(document).scrollTop() < 1){
		$('.header').removeClass('fixed');
		$('.header').removeClass('active');		
	}else if($(document).scrollTop() > 100 ){
		$('.header').removeClass('fixed');
		$('.header').addClass('active');
	}else{
		$('.header').addClass('fixed');
	}
});

Sticky Header animation effect using jQuery | Sticky Navbar effect using HTML CSS and jQuery

Video tutorial of Header animation effect using jQuery

Header animation effect using jQuery [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery