Navigation fixe et collante
Faites rester une barre de navigation en haut de la fenêtre avec sticky top-0 ou fixed top-0, puis ajoutez un flou d’arrière-plan pour un effet moderne de verre dépoli.
Navigation fixe et collante est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Sticky vs Fixed Positioning
Two Tailwind utilities make a navbar persist as users scroll: sticky and fixed. Understanding the difference is key to choosing the right one for your layout.
sticky top-0 keeps the element in the normal document flow until the user scrolls it to the top, then locks it there. fixed top-0 removes the element from document flow entirely and pins it to the viewport, which means the page content must be offset to avoid being hidden behind the navbar.
<!-- Sticky: stays in flow, locks at top when scrolled to -->
<nav class="sticky top-0 bg-white shadow-sm z-50">
...
</nav>
<!-- Fixed: always pinned to viewport, content must have top padding -->
<nav class="fixed top-0 inset-x-0 bg-white shadow-sm z-50">
...
</nav>
<main class="pt-16"><!-- offset for fixed navbar height -->
...
</main>The z-index Layer
Both sticky and fixed navbars need a high z-index to float above page content like images, cards, and dropdowns. Without it, the navbar can appear beneath absolutely positioned elements.
Tailwind provides z-index utilities from z-0 to z-50 plus z-auto. A navbar almost always uses z-50 to ensure it sits above all standard page content. If you use Headless UI dialogs (z-40) or modals, the navbar's z-index should still be below those to avoid covering overlay UIs.
<nav class="sticky top-0 bg-white shadow-md z-50">
<!-- z-50 keeps the nav above cards, images, and tooltips -->
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<span class="font-bold text-blue-600">Brand</span>
<div class="flex gap-6">
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
<a href="/about" class="text-gray-600 hover:text-gray-900">About</a>
</div>
</div>
</nav>Background Blur Frosted Glass Effect
A modern navbar trend is the frosted glass effect: a semi-transparent background that blurs the content scrolling behind it. Use bg-white/80 backdrop-blur-md to achieve this — the slash syntax sets 80% opacity and backdrop-blur-md applies the blur filter to content behind the element.
This creates a polished, contemporary look seen in macOS-style apps and many SaaS dashboards. Pair it with border-b border-gray-200/50 for a subtle bottom border.
<nav class="sticky top-0 bg-white/80 backdrop-blur-md border-b border-gray-200/50 z-50">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<span class="font-bold text-blue-600">Brand</span>
<div class="flex items-center gap-6">
<a href="/" class="text-sm font-medium text-gray-700 hover:text-gray-900">Home</a>
<a href="/docs" class="text-sm font-medium text-gray-700 hover:text-gray-900">Docs</a>
<a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Sign Up</a>
</div>
</div>
</nav>Scroll-Triggered Shadow With JavaScript
A common enhancement is to add or remove a shadow based on scroll position. The navbar starts flat when at the top and gains a shadow after the user scrolls down. This is done with a JavaScript scroll listener that toggles a class.
The class scrolled adds shadow-md using JavaScript, keeping the visual transition smooth with transition-shadow duration-200 on the navbar element itself.
<nav id="navbar" class="sticky top-0 bg-white z-50 transition-shadow duration-200">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<span class="font-bold text-blue-600">Brand</span>
</div>
</nav>
<script>
const nav = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 10) {
nav.classList.add('shadow-md');
} else {
nav.classList.remove('shadow-md');
}
});
</script>Fixed Bottom Navigation Bar
On mobile apps and PWAs, a bottom navigation bar is more thumb-friendly than a top bar. Use fixed bottom-0 inset-x-0 to pin the bar to the bottom of the viewport, and add pb-safe (or equivalent) for iPhone notch/home-bar safe areas.
Each nav item is an anchor containing an icon above a label text, centered with flex flex-col items-center gap-1. The active item uses your brand color while inactive items use a muted gray.
<nav class="fixed bottom-0 inset-x-0 bg-white border-t border-gray-200 z-50">
<div class="flex justify-around items-center h-16 px-4">
<a href="/" class="flex flex-col items-center gap-1 text-blue-600">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h4v-4h2v4h4a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg>
<span class="text-xs font-medium">Home</span>
</a>
<a href="/explore" class="flex flex-col items-center gap-1 text-gray-500">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/></svg>
<span class="text-xs font-medium">Explore</span>
</a>
<a href="/profile" class="flex flex-col items-center gap-1 text-gray-500">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
<span class="text-xs font-medium">Profile</span>
</a>
</div>
</nav>Sticky Navbar Offset and Layout
When using sticky, the element stays in the document flow, so page content naturally starts below it. However, if the sticky navbar is inside a constrained container, it can only stick within that container's bounds.
For a full-width sticky navbar that spans the entire screen, place the <nav> as a direct child of the <body> or the outermost layout wrapper — not inside a container div with max-w-*.
<!-- Correct: nav is outside the content wrapper -->
<body class="min-h-screen bg-gray-50">
<nav class="sticky top-0 bg-white shadow-sm z-50">
<div class="max-w-7xl mx-auto px-6 py-4">...</div>
</nav>
<main class="max-w-7xl mx-auto px-6 py-8">
<!-- Page content -->
</main>
</body>Transitioning Navbar Height on Scroll
A sophisticated UX pattern is a navbar that shrinks on scroll — taller at the top of the page and more compact after the user scrolls down. This is achieved by toggling a class that changes the padding values.
The transition-all duration-300 on the nav element ensures the height change animates smoothly, creating a polished professional feel.
<nav id="nav" class="sticky top-0 bg-white shadow-sm z-50 transition-all duration-300">
<div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between" id="nav-inner">
<span class="text-xl font-bold text-blue-600">Brand</span>
</div>
</nav>
<script>
const navInner = document.getElementById('nav-inner');
window.addEventListener('scroll', () => {
if (window.scrollY > 60) {
navInner.classList.remove('py-5');
navInner.classList.add('py-2');
} else {
navInner.classList.remove('py-2');
navInner.classList.add('py-5');
}
});
</script>Sticky Sidebar Navigation
In dashboard layouts, the sidebar is often sticky rather than the top navbar. Use sticky top-0 h-screen overflow-y-auto on the sidebar to make it fill the viewport height and scroll independently when its content is taller than the screen.
Pair this with flex on the page wrapper and flex-1 on the main content area to create a proper two-column layout where only the main area scrolls.
<div class="flex min-h-screen">
<!-- Sticky sidebar -->
<aside class="w-64 flex-shrink-0 sticky top-0 h-screen overflow-y-auto bg-gray-900 text-white">
<div class="p-6">
<p class="text-lg font-bold">Dashboard</p>
<nav class="mt-8 space-y-1">
<a href="/" class="block px-3 py-2 rounded-lg bg-gray-800 text-white text-sm">Overview</a>
<a href="/users" class="block px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-800 text-sm">Users</a>
<a href="/settings" class="block px-3 py-2 rounded-lg text-gray-300 hover:bg-gray-800 text-sm">Settings</a>
</nav>
</div>
</aside>
<!-- Scrollable main -->
<main class="flex-1 overflow-y-auto p-8 bg-gray-50">
<!-- Page content -->
</main>
</div>Hiding Navbar on Scroll Down
A mobile-friendly pattern hides the navbar when scrolling down (to give more screen space) and reveals it when scrolling back up. This uses JavaScript to detect scroll direction and toggle a -translate-y-full class.
Combine with transition-transform duration-300 on the navbar for a smooth slide-up and slide-down animation. This technique is common in mobile-first apps and news sites.
<nav id="auto-nav" class="fixed top-0 inset-x-0 bg-white shadow-sm z-50 transition-transform duration-300">
<div class="max-w-7xl mx-auto px-6 py-4">
<span class="font-bold text-blue-600">Brand</span>
</div>
</nav>
<script>
let lastY = 0;
const nav = document.getElementById('auto-nav');
window.addEventListener('scroll', () => {
const currentY = window.scrollY;
if (currentY > lastY && currentY > 64) {
nav.classList.add('-translate-y-full');
} else {
nav.classList.remove('-translate-y-full');
}
lastY = currentY;
});
</script>Announcement Bar Above Navbar
Many marketing sites add an announcement bar above the navbar for promotions, alerts, or product updates. This bar is also sticky — but it should scroll away once the user scrolls a bit, so use a sticky top-0 on both elements: the bar and the nav will stack naturally, and both will stick to their respective positions in the stack.
Use flex items-center justify-center gap-4 px-6 py-2 bg-blue-600 text-white text-sm for a clean, full-width announcement band.
<!-- Announcement bar -->
<div class="sticky top-0 z-50 flex items-center justify-center gap-4 px-6 py-2 bg-blue-600 text-white text-sm">
<span>Summer sale! Use code <strong>SUMMER25</strong> for 25% off.</span>
<button class="text-white/70 hover:text-white" aria-label="Dismiss">×</button>
</div>
<!-- Main navbar -->
<nav class="sticky top-8 bg-white shadow-sm z-40">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<span class="font-bold text-blue-600">Brand</span>
</div>
</nav>Transparent Navbar Over Hero
Landing pages often use a transparent navbar that floats over a full-screen hero image. Use absolute top-0 inset-x-0 to position the nav over the hero without affecting layout, and set text to white: text-white for all links.
This technique requires the hero section to have relative positioning and enough height to accommodate the navbar's visual overlap. As users scroll, a JavaScript listener can switch the navbar to a solid background.
<div class="relative min-h-screen">
<!-- Hero background -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-900 to-purple-900"></div>
<!-- Transparent navbar -->
<nav class="absolute top-0 inset-x-0 z-50">
<div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
<span class="text-xl font-bold text-white">Brand</span>
<div class="flex items-center gap-6">
<a href="/" class="text-sm font-medium text-white/80 hover:text-white">Home</a>
<a href="/about" class="text-sm font-medium text-white/80 hover:text-white">About</a>
<a href="/signup" class="px-4 py-2 text-sm font-semibold bg-white text-blue-900 rounded-lg">
Get Started
</a>
</div>
</div>
</nav>
<!-- Hero content -->
<div class="relative flex items-center justify-center h-screen text-center">
<h1 class="text-5xl font-bold text-white">Welcome</h1>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: sticky vs fixed positioning and their different layout implications for page content; the frosted glass navbar with bg-white/80 backdrop-blur-md; and scroll-triggered enhancements like dynamic shadow addition and navbar shrinking via JavaScript class toggling. Next up we build a vertical sidebar layout.
Questions Fréquemment Posées
La leçon « Navigation fixe et collante » est-elle gratuite ?
Oui — le texte complet de « Navigation fixe et collante » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Navigation fixe et collante » ?
Faites rester une barre de navigation en haut de la fenêtre avec sticky top-0 ou fixed top-0, puis ajoutez un flou d’arrière-plan pour un effet moderne de verre dépoli. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Navigation fixe et collante » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Créer une barre de navigation réactive
- Navigation fixe et collante
- Disposition avec barre latérale verticale
- Barre latérale mobile rétractable