Navbar Sticky

Aperçu

Simule un navigateur fixe glassmorphic avec défilement. Cliquez sur le bouton dans l’aperçu pour voir l’effet de défilement.

Cas d’utilisation et fonctionnalités

• Page de destination/Portfolio : l’expression du navigateur change à mesure que vous faites défiler, lui donnant une impression de bien conçu.

• Convient aux thèmes sombres : le « filtre de toile de fond : flou » de Glassmorphism est particulièrement efficace sur les arrière-plans sombres.

• Utilisation de position : sticky : maximisez les performances en tirant parti de position : sticky en CSS au lieu de vous fier uniquement à JavaScript.

Points de conception et d’UX

1. ** Se déclenche au défilement de 10 px ** : le morphisme du verre apparaît à un moment neutre.

2. Modification du remplissage : réduit de « 1,25rem à 0,75rem » pour le rendre plus compact et sécuriser une zone de contenu plus large.

3. Lisser avec transition : créez des changements naturels en effectuant simultanément une transition entre les quatre propriétés d’arrière-plan, de flou, d’ombre de boîte et de remplissage.

Comment personnaliser

Modifier le seuil de démarrage du défilement:

// déclenche plus tôt (5px)

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



// déclenche plus tard (50px)

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

ajouter un lien:

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

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

##Code d’implémentation

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

État de compatibilité du navigateur

| Navigateur | Statut de compatibilité |

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

| Chrome 76+ | ✅ Entièrement compatible |

| Firefox 103+ | ✅Compatible |

| Safari 9+ | ✅ Entièrement compatible |

| Bord 79+ | ✅ Entièrement compatible |

backdrop-filter n’est pas pris en charge par certains navigateurs plus anciens, mais un arrière-plan semi-transparent de background: rgba(...) est suffisant comme solution de secours.