Sticky header on scroll jQuery

In this article, you will learn how to create a sticky header on scroll using CSS and jQuery.

Sticky elements increase visitors' confidence as they scroll up and down the page, giving them a sense of control while interacting with the site. Generally, a website contains pages with long content. This results in more engagement with the content of the pages. A sticky header is important for a reader's attraction. Many web designers adopt this to show menu navigation, important notes, and much more. Here, we will create a header that sticks to the top of the web page even on scrolling.

There are many libraries available to implement sticky headers, but here we will use simple jQuery and CSS for sticky headers. jQuery is a lightweight, small JavaScript library. The intention of jQuery is to "write less, do more".

HTML Code for sticky header

Let's start by creating an HTML document.

<!doctype html>
<html>
	<head>
	</head>
	<body>
        <div class="header">
        <h1>Sticky Header</h1>
        </div>
        <div class="content">
		<h2>Our mission is to provide good educational resources to technical students, learner, web developers. 
		In this platform, we have share our knowledge and experience through developement resources, tutorials and 
		multiple interview questions and exercises. We work continuously to update the articles as per new technology changes.
		We hope these resources will save your time and easy to understand.
		This website is fully responsive, the content moves freely across all screen resolutions and all devices. 
		So that, the user is also able to read on mobile devices and tablets.</h2>
        </div>
	</body>
</html>

CSS Part

Here is the simple CSS styling code which helps to create the sticky header.

		.header{
		  position: fixed;width: 100%;
		  text-align: center; background: #89CFF0;
		  font-size: 50px;font-family: 'PT Sans', sans-serif;
		  line-height: 60px; color: #2e2e2e; height: 180px;
		}
		.content { width: 200px; height: 500px; padding-top:300px;}

jQuery Code Part

The given jQuery code enables the sticky header when the window is scrolled down.

		$(window).scroll(function() {
		if ($(this).scrollTop() > 1){  
			$('div.header').addClass("sticky");
		  }
		  else{
			$('div.header').removeClass("sticky");
		  }
		});

Complete Code: Sticky header on scroll jQuery

Here, we have merged all the above code.

<!doctype html>
<html>
	<head>
	<style>
		.header{
		  position: fixed;width: 100%;
		  text-align: center; background: #89CFF0;
		  font-size: 50px;font-family: 'PT Sans', sans-serif;
		  line-height: 60px; color: #2e2e2e; height: 180px;
		}
		.content { width: 200px; height: 500px; padding-top:300px;}
	</style>
	<script>
		$(window).scroll(function() {
		if ($(this).scrollTop() > 1){  
			$('div.header').addClass("sticky");
		  }
		  else{
			$('div.header').removeClass("sticky");
		  }
		});
	</script>
	</head>
	<body>
        <div class="header">
        <h1>Sticky Header</h1>
        </div>
        <div class="content">
		<h2>Our mission is to provide good educational resources to technical students, learner, web developers. 
		In this platform, we have share our knowledge and experience through developement resources, tutorials and 
		multiple interview questions and exercises. We work continuously to update the articles as per new technology changes.
		We hope these resources will save your time and easy to understand.
		This website is fully responsive, the content moves freely across all screen resolutions and all devices. 
		So that, the user is also able to read on mobile devices and tablets.</h2>
        </div>
	</body>
</html>

JavaScript display PDF in the browser using Ajax call
jQuery Ajax serialize form data example
Django Pagination with Ajax and jQuery
Ajax live data search using jQuery PHP MySQL
jQuery File upload progress bar with file size validation
Image popup on page load using HTML and jQuery
PHP script to read email inbox
Retrieve Data From Database Without Page refresh using AJAX, PHP and Javascript
How to print specific part of a web page in javascript
How to store emoji in MySQL
How to display PDF file in PHP from database
jQuery loop over JSON result after AJAX Success
Dynamically Add/Delete HTML Table Rows Using Javascript
Submit a form data without page refresh using PHP, Ajax and Javascript
PHP Server Side Form Validation
How to add google reCAPTCHA v2 in registration form using PHP
Complete HTML Form Validation in PHP