Navegación fija y adhesiva
Haga que una barra de navegación permanezca en la parte superior de la ventana gráfica con sticky top-0 o fixed top-0, y añada un desenfoque de fondo para lograr un aspecto moderno de cristal esmerilado.
Navegación fija y adhesiva es una lección gratuita de Tailwind CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Tailwind CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
Posicionamiento adhesivo frente a fijo
Dos utilidades de Tailwind permiten que una navbar permanezca visible mientras los usuarios se desplazan: sticky y fixed. Entender la diferencia es fundamental para elegir la opción adecuada para su diseño.
sticky top-0 mantiene el elemento en el flujo normal del documento hasta que el usuario lo desplaza hasta la parte superior; entonces lo fija allí. fixed top-0 elimina por completo el elemento del flujo del documento y lo fija a la ventana gráfica, por lo que es necesario desplazar el contenido de la página para evitar que quede oculto detrás de la 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>La capa z-index
Tanto las navbars adhesivas como las fijas necesitan un z-index alto para situarse por encima del contenido de la página, como imágenes, tarjetas y desplegables. Sin él, la navbar puede aparecer debajo de elementos con posicionamiento absoluto.
Tailwind proporciona utilidades de z-index desde z-0 hasta z-50, además de z-auto. Una navbar casi siempre usa z-50 para garantizar que quede por encima de todo el contenido estándar de la página. Si usa diálogos de Headless UI (z-40) o modales, el z-index de la navbar debe seguir siendo inferior para evitar que cubra las interfaces superpuestas.
<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>Efecto de cristal esmerilado con desenfoque del fondo
Una tendencia moderna en las navbars es el efecto de cristal esmerilado: un fondo semitransparente que desenfoca el contenido que se desplaza detrás. Use bg-white/80 backdrop-blur-md para conseguirlo: la sintaxis con barra establece una opacidad del 80 % y backdrop-blur-md aplica el filtro de desenfoque al contenido situado detrás del elemento.
Esto crea un aspecto pulido y contemporáneo, habitual en aplicaciones con estilo de macOS y en muchos dashboards SaaS. Combínelo con border-b border-gray-200/50 para añadir un borde inferior sutil.
<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>Sombra activada al desplazarse con JavaScript
Una mejora habitual consiste en añadir o quitar una sombra según la posición de desplazamiento. La navbar aparece plana cuando está en la parte superior y adquiere una sombra cuando el usuario se desplaza hacia abajo. Esto se hace con un listener de desplazamiento de JavaScript que alterna una clase.
La clase scrolled añade shadow-md mediante JavaScript, mientras que transition-shadow duration-200 en el propio elemento de la navbar mantiene fluida la transición visual.
<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>Barra de navegación inferior fija
En aplicaciones móviles y PWA, una barra de navegación inferior resulta más cómoda para el pulgar que una barra superior. Use fixed bottom-0 inset-x-0 para fijar la barra a la parte inferior de la ventana gráfica y añada pb-safe (o el equivalente) para las áreas seguras de la muesca y la barra de inicio del iPhone.
Cada elemento de navegación es un anclaje que contiene un icono sobre un texto de etiqueta, centrado con flex flex-col items-center gap-1. El elemento activo usa el color de su marca, mientras que los inactivos usan un gris apagado.
<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>Desplazamiento y diseño de una navbar adhesiva
Al usar sticky, el elemento permanece en el flujo del documento, por lo que el contenido de la página comienza naturalmente debajo de él. Sin embargo, si la barra de navegación fija se encuentra dentro de un contenedor con restricciones, solo puede mantenerse fija dentro de los límites de ese contenedor.
Para obtener una barra de navegación fija de ancho completo que abarque toda la pantalla, coloque <nav> como hijo directo de <body> o del contenedor de diseño más externo, no dentro de un div contenedor con 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>Transición de la altura de la barra de navegación al desplazarse
Un patrón de UX sofisticado consiste en una barra de navegación que se encoge al desplazarse: es más alta en la parte superior de la página y más compacta después de que el usuario se desplaza hacia abajo. Esto se consigue alternando una clase que modifica los valores de relleno.
La clase transition-all duration-300 en el elemento nav garantiza que el cambio de altura se anime suavemente, lo que crea una experiencia pulida y profesional.
<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>Navegación lateral fija
En los diseños de paneles, a menudo la barra lateral es fija en lugar de la barra de navegación superior. Use sticky top-0 h-screen overflow-y-auto en la barra lateral para que ocupe toda la altura de la ventana gráfica y se desplace de forma independiente cuando su contenido sea más alto que la pantalla.
Combine esto con flex en el contenedor de la página y flex-1 en el área de contenido principal para crear un diseño adecuado de dos columnas en el que solo se desplace el área principal.
<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>Ocultar la barra de navegación al desplazarse hacia abajo
Un patrón adaptado a dispositivos móviles oculta la barra de navegación al desplazarse hacia abajo, para ofrecer más espacio en pantalla, y la muestra de nuevo al desplazarse hacia arriba. Para ello, se usa JavaScript para detectar la dirección del desplazamiento y alternar una clase -translate-y-full.
Combine esto con transition-transform duration-300 en la barra de navegación para obtener una animación suave al deslizarla hacia arriba y hacia abajo. Esta técnica es habitual en aplicaciones con enfoque mobile-first y en sitios de noticias.
<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>Barra de anuncios sobre la barra de navegación
Muchos sitios de marketing añaden una barra de anuncios sobre la barra de navegación para mostrar promociones, alertas o actualizaciones del producto. Esta barra también es fija, pero debería desaparecer al desplazarse un poco; por ello, use sticky top-0 en ambos elementos: la barra y el nav se apilarán naturalmente y ambos permanecerán fijos en sus respectivas posiciones dentro de la pila.
Use flex items-center justify-center gap-4 px-6 py-2 bg-blue-600 text-white text-sm para crear una banda de anuncios limpia y de ancho completo.
<!-- 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>Barra de navegación transparente sobre el hero
Las páginas de destino suelen usar una barra de navegación transparente que flota sobre una imagen hero a pantalla completa. Use absolute top-0 inset-x-0 para colocar el nav sobre el hero sin afectar al diseño, y establezca el texto en blanco mediante text-white para todos los enlaces.
Esta técnica requiere que la sección hero tenga un posicionamiento relative y suficiente altura para dar cabida a la superposición visual de la barra de navegación. A medida que los usuarios se desplazan, un listener de JavaScript puede cambiar la barra de navegación a un fondo sólido.
<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>Comprobación rápida
Compruebe su comprensión de los conceptos de Tailwind CSS Mastery de esta lección.
Resumen de la lección
En esta lección ha aprendido: el posicionamiento sticky frente al fixed y sus distintas implicaciones para el diseño del contenido de la página; la barra de navegación de efecto cristal esmerilado con bg-white/80 backdrop-blur-md; y las mejoras activadas por el desplazamiento, como la adición dinámica de sombras y la reducción de la barra de navegación mediante la alternancia de clases con JavaScript. A continuación, crearemos un diseño de barra lateral vertical.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Navegación fija y adhesiva» es gratis?
Sí — el texto completo de «Navegación fija y adhesiva» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Tailwind CSS Academy, actualiza a CoddyKit PRO. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Navegación fija y adhesiva»?
Haga que una barra de navegación permanezca en la parte superior de la ventana gráfica con sticky top-0 o fixed top-0, y añada un desenfoque de fondo para lograr un aspecto moderno de cristal esmeril… Practicas Tailwind CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Tailwind CSS Academy?
No se requiere experiencia previa. Tailwind CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Navegación fija y adhesiva»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Tailwind CSS Academy?
Sí. Cada lección de Tailwind CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Creación de una barra de navegación adaptable
- Navegación fija y adhesiva
- Diseño de barra lateral vertical
- Barra lateral móvil contraíble