固定ナビゲーションと追従ナビゲーション
sticky top-0またはfixed top-0でナビバーをビューポート上部に固定し、backdrop blurを加えて現代的なすりガラス風の見た目にします。
「固定ナビゲーションと追従ナビゲーション」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
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.
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「固定ナビゲーションと追従ナビゲーション」レッスンは無料ですか？
はい。「固定ナビゲーションと追従ナビゲーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「固定ナビゲーションと追従ナビゲーション」で何を学びますか？
sticky top-0またはfixed top-0でナビバーをビューポート上部に固定し、backdrop blurを加えて現代的なすりガラス風の見た目にします。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「固定ナビゲーションと追従ナビゲーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- レスポンシブなナビバーの構築
- 固定ナビゲーションと追従ナビゲーション
- 縦型サイドバーのレイアウト
- 折りたたみ可能なモバイルサイドバー