Sticky Header using CSS

by Vincy. Last modified on July 12th, 2022.

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

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page