Sticky Header using CSS

Sticky header in a page remains in a fixed position while scrolling up and down. This will be useful to show the header content always visible even we scroll the page.

In this tutorial, we are going to see how to show sticky header on page scroll. We are using CSS styles to put a sticky header in the page.

Download

HTML Sticky Header Content

This code shows the HTML sticky header content showing the static menu.

<div class="sticky-header">Home | About | Contact</div>
<div class="content-scroll">
	<p>Scrollable content with sticky header:</p>
	<p>This example is for showing sticky header on page scroll.</p>
	<p>CSS styles are used to control sticky header on scrolling.</p>
	<p>It can be done by using some client'-side scripting languages.</p>
	<p>For example, we can use jQuery library for obtaining ticky header.</p>
</div>

CSS Styles for Sticky Header

The styles for showing sticky header on page scroll are,

.sticky-header {
	background-color: #000;
	color: #fff;
	width:100%;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 10px;
	text-align:left;
	letter-spacing: 3px;
}
.content-scroll{
	height:1000px;
	padding:100px 0px 0px 50px;
}
.content-scroll p{
	height:50px;
}

Download