Ask any question about Tailwind CSS here... and get an instant response.
Post this Question & Answer:
How can I use Tailwind CSS to create a sticky header that hides on scroll?
Asked on Jan 16, 2026
Answer
To create a sticky header that hides on scroll using Tailwind CSS, you can utilize Tailwind's utility classes for positioning and JavaScript for scroll detection. Tailwind provides classes like "sticky" and "top-0" to keep elements fixed at the top of the viewport.
<!-- BEGIN COPY / PASTE -->
<header class="sticky top-0 bg-white shadow-md transition-transform duration-300" id="header">
<div class="container mx-auto p-4">
<h1 class="text-xl font-bold">Sticky Header</h1>
</div>
</header>
<script>
let lastScrollTop = 0;
const header = document.getElementById('header');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
header.style.transform = 'translateY(-100%)';
} else {
header.style.transform = 'translateY(0)';
}
lastScrollTop = scrollTop;
});
</script>
<!-- END COPY / PASTE -->Additional Comment:
- The "sticky" class keeps the header at the top of the viewport while scrolling.
- The "top-0" class ensures the header starts at the top position.
- JavaScript is used to detect scroll direction and apply a transform to hide or show the header.
- The "transition-transform" and "duration-300" classes provide a smooth transition effect.
Recommended Links:
