Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a fixed/sticky header on scroll with CSS and JavaScript?
A fixed/sticky header remains at the top of the page when users scroll down, providing constant navigation access. This can be achieved using CSS positioning and JavaScript to detect scroll events.
CSS Approach
The simplest method uses the CSS position: sticky property −
.header {
position: sticky;
top: 0;
z-index: 1000;
}
Example 1: Pure CSS Sticky Header
Here's a basic sticky header using only CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 200vh;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}
.content {
padding: 20px;
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="content">
<h1>Scroll down to see the sticky header</h1>
<p>This is content before the header...</p>
</div>
<div class="header">
<h2>Sticky Navigation Header</h2>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>More content here to enable scrolling...</p>
</div>
</body>
</html>
A dark header with "Sticky Navigation Header" text that sticks to the top when scrolling past its initial position.
Example 2: JavaScript-Controlled Fixed Header
For more control and animation effects, use JavaScript to toggle classes −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
height: 200vh;
}
.header {
width: 100%;
background-color: #2c5aa0;
color: white;
padding: 20px 0;
text-align: center;
transition: all 0.3s ease;
}
.header.sticky {
position: fixed;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
padding: 10px 0;
}
.content {
padding: 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="content">
<h1>Fixed Sticky Header Example</h1>
<p>Scroll down to see the header become fixed...</p>
</div>
<div class="header" id="navbar">
<h2>Navigation Header</h2>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Continue scrolling to see the sticky effect in action...</p>
</div>
<script>
window.onscroll = function() {
makeSticky();
};
var header = document.getElementById("navbar");
var sticky = header.offsetTop;
function makeSticky() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</body>
</html>
A blue header that becomes fixed at the top with a smooth transition and shadow effect when scrolling past its original position.
Key Differences
| Method | Pros | Cons |
|---|---|---|
CSS position: sticky
|
Simple, no JavaScript needed | Limited browser support, less control |
JavaScript with position: fixed
|
Full control, smooth animations | Requires JavaScript, more complex |
Conclusion
Both CSS sticky positioning and JavaScript-controlled fixed headers create effective sticky navigation. Choose CSS for simplicity or JavaScript for advanced effects and better browser compatibility.
Updated on: 2026-03-15T14:57:39+05:30
1K+ Views
Advertisements