Design

6 vues

5 min

Comment créer une navbar sticky qui change de style au scroll dans Webflow ?

Apprenez à créer une navbar sticky qui change de style au scroll dans Webflow avec un script JavaScript léger.

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

Scrollez dans la zone pour voir la navbar changer

↓ Scrollez ici

Bienvenue sur Gemeos. Nous créons des sites Webflow haute performance pour les startups et scale-ups qui veulent une présence digitale à la hauteur de leurs ambitions.

Notre approche combine design, développement Webflow et stratégie SEO pour des résultats mesurables. Chaque projet est conçu pour convertir.

Continuez à scroller pour voir la navbar changer d'apparence au-delà de 50px de défilement.

Approche	Méthode	Avantage
CSS natif Webflow	Position: sticky + classe au scroll	Aucun JS requis si style fixe
JS + classe CSS (ce tutoriel)	Script qui ajoute une classe au scroll	Changement de style dynamique
Webflow Interactions	Scroll animation sur la navbar	Visuel uniquement dans le Designer

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.

bon à savoir

Pour éviter un flash au chargement sur des pages déjà scrollées (ex : retour arrière navigateur), ajoutez un appel immédiat à la fonction scroll au chargement : window.dispatchEvent(new Event('scroll')); après la définition du listener.

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é

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

4.9/5 • 97 avis

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

on en discute