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.
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;
}
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.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.