0
0
Tailwindmarkup~5 mins

Sticky header and footer in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A sticky header and footer stay visible on the screen when you scroll. This helps users always see important info or navigation.

When you want the site menu to always be accessible at the top.
When you want a footer with contact info or buttons always visible.
When you have a long page and want quick access to navigation or actions.
When you want to improve user experience by keeping key parts in view.
When you want to highlight announcements or alerts at the top or bottom.
Syntax
Tailwind
<header class="sticky top-0">...</header>
<footer class="sticky bottom-0">...</footer>

sticky makes the element stick when scrolling.

top-0 and bottom-0 fix the element to the top or bottom edge.

Examples
This header sticks to the top with a white background and shadow.
Tailwind
<header class="sticky top-0 bg-white shadow">Header content</header>
This footer sticks to the bottom with padding and a light gray background.
Tailwind
<footer class="sticky bottom-0 bg-gray-200 p-4">Footer content</footer>
Both header and footer stick with high stacking order and colored backgrounds.
Tailwind
<header class="sticky top-0 z-50 bg-blue-600 text-white p-3">Sticky Header</header>
<footer class="sticky bottom-0 z-50 bg-blue-600 text-white p-3">Sticky Footer</footer>
Sample Program

This example shows a sticky header and footer using Tailwind CSS. The header stays at the top and the footer stays at the bottom while you scroll the tall content in the middle.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Sticky Header and Footer</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col min-h-screen">
  <header class="sticky top-0 bg-blue-700 text-white p-4 shadow">
    <h1 class="text-lg font-bold">Sticky Header</h1>
  </header>

  <main class="flex-grow p-4">
    <p>Scroll down to see the footer stay visible.</p>
    <div class="h-[150vh] bg-gray-100 mt-4 p-4">
      <p>This is a tall content area to enable scrolling.</p>
    </div>
  </main>

  <footer class="sticky bottom-0 bg-blue-700 text-white p-4 shadow">
    <p>Sticky Footer</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Use z-50 or higher if sticky elements get hidden behind other content.

Sticky elements keep their place in the page flow but stay visible when scrolling.

Make sure the parent container has enough height to allow scrolling.

Summary

Sticky header and footer stay visible when you scroll.

Use Tailwind classes sticky, top-0, and bottom-0 to create them.

They improve navigation and user experience on long pages.