Comment créer une navbar sticky au scroll dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer une navbar sticky qui change de style au scroll dans Webflow, sans librairie externe.

Exemple

1. Créez votre navbar et attribuez-lui une classe

Dans le Designer, sélectionnez votre Navbar. Attribuez-lui la classe navbar. Réglez son positionnement sur Fixed en haut de page.

2. Créez un état "scrolled" dans vos styles

Dans vos styles globaux, créez une variante navbar.scrolled avec les propriétés souhaitées : fond opaque, ombre portée, réduction de la hauteur. Exemple : background-color: #fff, box-shadow: 0 2px 8px rgba(0,0,0,0.1).

3. Ajoutez ce script dans le <body> de votre page

Allez dans Page Settings > Before </body> tag et collez le script suivant.

const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', function() {
  if (window.scrollY > 50) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

4. Publiez et testez

Publiez votre site et scrollez : la classe scrolled est ajoutée dès 50px de défilement. Ajustez la valeur 50 selon votre design.

Conclusion

Votre navbar change maintenant de style au scroll de façon fluide. Cas d'usage :

• Navbar transparente sur hero qui devient opaque au scroll
• Réduction de hauteur de la navbar pour gagner de l'espace
• Changement de couleur du logo clair vers foncé