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, website contains pages with long contents. This results more engage in the content of the pages. Sticky header is important for reader's attraction. Many web designers adopting this to show menu navigation, important notes and much more. Here, we will create a header that sticks to the top of web page even on scrolling.

These are many libraries available to implement sticky headers, but here we will use simple jQuery and CSS for sticky headers. As, jQuery is lightweight, small javascript library. The intension of jQuery is "write less, do more".

HTML Code

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: #d6d6d6;
		  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 window 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: #d6d6d6;
		  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
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