How can I use Tailwind to create a sticky header that only appears after scrolling?

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

Post this Question & Answer:

How can I use Tailwind to create a sticky header that only appears after scrolling?

Asked on Jan 14, 2026

Answer

To create a sticky header that appears after scrolling using Tailwind CSS, you can combine Tailwind's utility classes with a bit of JavaScript to toggle the visibility. Tailwind provides utilities for positioning and transitions that can help achieve this effect.

<!-- BEGIN COPY / PASTE -->
    <header id="sticky-header" class="fixed top-0 left-0 w-full bg-white shadow-md transform -translate-y-full transition-transform duration-300">
      <div class="max-w-7xl mx-auto p-4">
        <h1 class="text-xl font-bold">Sticky Header</h1>
      </div>
    </header>
    <script>
      window.addEventListener('scroll', () => {
        const header = document.getElementById('sticky-header');
        if (window.scrollY > 100) {
          header.classList.remove('-translate-y-full');
        } else {
          header.classList.add('-translate-y-full');
        }
      });
    </script>
    <!-- END COPY / PASTE -->

Additional Comment:

The header uses "fixed" to stay at the top and "transform" with "-translate-y-full" to initially hide it.
JavaScript listens for scroll events and toggles the "-translate-y-full" class based on scroll position.
Adjust the scroll threshold (100 in this example) as needed for when the header should appear.
Ensure your content has enough height to allow scrolling for testing.

✅ Answered with Tailwind CSS best practices.

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

How can I use Tailwind to create a sticky header that only appears after scrolling?

Asked on Jan 14, 2026

Answer

Real Questions. Clear Answers.