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.