Navbar Sticky

Visualização

Simula um navegador fixo glassmorphic com rolagem. Clique no botão na visualização para ver o efeito de rolagem.

Casos de uso e recursos

• Landing Page/Portfólio: A expressão do navegador muda conforme você rola, dando uma sensação de bem elaborado.

• Adequado para temas escuros: O backdrop-filter: blur do Glassmorphism fica especialmente bom em fundos escuros.

• Utilizando position: sticky: Maximize o desempenho aproveitando position: sticky em CSS em vez de depender apenas de JavaScript.

Pontos de design e UX

1. Incêndios na rolagem 10px: O morfismo do vidro aparece em tempo neutro.

2. Alteração no preenchimento: Reduzido de 1.25rem to 0.75rem para torná-lo mais compacto e proteger uma área de conteúdo mais ampla.

3. Suavização com transition: Crie alterações naturais fazendo a transição simultânea das quatro propriedades de plano de fundo, desfoque, sombra de caixa e preenchimento.

Como personalizar

Alterar limite de início de rolagem:

// aciona mais cedo (5px)

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



// aciona mais tarde (50px)

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

adicionar link:

<li><a href="#services">serviço</a></li>

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

Código de implementação

<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>

Status de compatibilidade do navegador

| Navegador | Estado de compatibilidade |

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

| Cromo 76+ | ✅ Totalmente compatível |

| Firefox 103+ | ✅ Compatível |

| Safári 9+ | ✅ Totalmente compatível |

| Borda 79+ | ✅ Totalmente compatível |

backdrop-filter não é suportado por alguns navegadores mais antigos, mas um fundo semitransparente de background: rgba(...) é suficiente como substituto.