Barra de Navegación Fija

Vista previa

Simula un navegador fijo glassmorphic con desplazamiento. Haga clic en el botón en la vista previa para ver el efecto de desplazamiento.

Casos de uso y características

• Página de inicio/Portafolio: la expresión del navegador cambia a medida que se desplaza, lo que le da una sensación de estar bien diseñado.

• Adecuado para temas oscuros: el backdrop-filter: blur de Glassmorphism se ve especialmente bien en fondos oscuros.

• Utilizando position: sticky: maximiza el rendimiento aprovechando position: sticky en CSS en lugar de depender solo de JavaScript.

Puntos de diseño y UX

1. Se dispara con un desplazamiento de 10 píxeles: el morfismo del vidrio aparece en una sincronización neutral.

2. Cambio en el relleno: Reducido de 1.25rem to 0.75rem para hacerlo más compacto y asegurar un área de contenido más amplia.

3. Suavizar con transition: cree cambios naturales realizando la transición simultánea de las cuatro propiedades de fondo, desenfoque, sombra de cuadro y relleno.

Cómo personalizar

Cambiar el umbral de inicio de desplazamiento:

// activar antes (5px)

if (demo.scrollTop > 5) { ... }



// activar más tarde (50px)

if (demo.scrollTop > 50) { ... }

agregar enlace:

<li><a href="#services">servicio</a></li>

<li><a href="#blog">Blog</a></li>

Código de implementación

<nav class="snav-bar" id="sticky-nav">

<div class="snav-logo">BRAND</div>

<ul class="snav-links">

  <li><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Work</a></li>

</ul>

<button class="snav-cta">Contact</button>

</nav>



<style>
.snav-bar {

position: sticky;

top: 0;

z-index: 100;

width: 100%;

box-sizing: border-box;

padding: 1.25rem 2rem;

display: flex;

align-items: center;

justify-content: space-between;

gap: 1.5rem;

transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;

}

.snav-bar.scrolled {

background: rgba(15,23,42,0.75);

backdrop-filter: blur(16px);

box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4);

padding: 0.75rem 2rem;

}
</style>



<script>

window.addEventListener('scroll', function() {

var nav = document.getElementById('sticky-nav');

if (window.scrollY > 10) nav.classList.add('scrolled');

else nav.classList.remove('scrolled');

});

</script>

Estado de compatibilidad del navegador

| Navegador | Estado de compatibilidad |

|--------|-------|

| Cromo 76+ | ✅ Totalmente compatible |

| Firefox 103+ | ✅Compatibles |

| Safari 9+ | ✅ Totalmente compatible |

| Borde 79+ | ✅ Totalmente compatible |

backdrop-filter no es compatible con algunos navegadores antiguos, pero un fondo semitransparente de background: rgba(...) es suficiente como respaldo.