How can I use Tailwind CSS to create a sticky header that hides on scroll?

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.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How can I use Tailwind CSS to create a sticky header that hides on scroll?

Asked on Jan 16, 2026

Answer

Real Questions. Clear Answers.