Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a sticky header that stays fixed during scroll? Pending Review
Asked on Apr 16, 2026
Answer
To create a sticky header that remains fixed at the top of the page during scrolling, you can use CSS position properties. The "position: sticky" property is particularly useful for this purpose.
<!-- BEGIN COPY / PASTE -->
<style>
header {
position: sticky;
top: 0;
background-color: #fff;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
</style>
<header>
Sticky Header
</header>
<div style="height: 2000px;">
Scroll down to see the sticky header in action.
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "position: sticky" property allows the header to stick to the top when you scroll past it.
- The "top: 0" ensures that the header sticks to the top of the viewport.
- Adding a "z-index" ensures the header stays above other content.
- Ensure the parent element has a height greater than the viewport for the sticky effect to be visible.
Recommended Links:
