Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer une barre de progression par section (dot navigation) dans Webflow, avec point actif mis en surbrillance au scroll.

Exemple

Scrollez dans la zone — les dots à droite indiquent votre position

Introduction

Webflow est un outil no-code qui génère du HTML, CSS et JavaScript propre sans écrire une ligne de code.

Fonctionnalités

Designer visuel, CMS intégré, animations natives, hosting inclus et déploiement en un clic.

Performance

CDN Fastly intégré, images optimisées automatiquement, Core Web Vitals excellents par défaut.

Tarifs

Plans à partir de 14€/mois. Hosting et CMS inclus, sans frais de maintenance ou de plugin.

Conclusion

Webflow est le meilleur choix pour les agences et équipes marketing qui veulent performance et autonomie.

Section active : Introduction

Attribut	Élément	Valeur exemple
data-progress-section	Section Webflow	Nom de la section (ex: 'Introduction')
id='section-progress'	Div conteneur	Injecté en fixed right par le script

1. Ajoutez les attributs sur vos sections

Sur chaque section de votre page, ajoutez le custom attribute data-progress-section avec le nom de la section comme valeur (ex: Introduction, Fonctionnalités...). Ces noms apparaissent en tooltip au survol des dots.

2. Créez le conteneur dans Webflow

Créez un Div vide avec l'ID section-progress. Sa position sera gérée par le script (fixed right, centré verticalement). Vous pouvez le laisser n'importe où dans le DOM.

(function() {
  var sections = document.querySelectorAll('[data-progress-section]');
  var container = document.getElementById('section-progress');
  if (!sections.length || !container) return;

  var dots = [];
  container.style.cssText = 'position:fixed;right:24px;top:50%;transform:translateY(-50%);' +
    'display:flex;flex-direction:column;gap:8px;z-index:999;';

  sections.forEach(function(section, i) {
    var dot = document.createElement('div');
    dot.style.cssText = 'width:8px;height:8px;border-radius:50%;background:#e5e7eb;' +
      'transition:all 0.3s;cursor:pointer;';
    dot.title = section.dataset.progressSection || ('Section ' + (i + 1));
    dot.addEventListener('click', function() {
      section.scrollIntoView({ behavior: 'smooth' });
    });
    container.appendChild(dot);
    dots.push(dot);
  });

  function update() {
    var active = 0;
    sections.forEach(function(s, i) {
      if (s.getBoundingClientRect().top <= window.innerHeight / 2) active = i;
    });
    dots.forEach(function(d, i) {
      var isActive = i === active;
      d.style.background = isActive ? '#a78bfa' : i < active ? '#d4b8fc' : '#e5e7eb';
      d.style.width = isActive ? '10px' : '8px';
      d.style.height = isActive ? '10px' : '8px';
    });
  }

  update();
  window.addEventListener('scroll', update, { passive: true });
})();

Conclusion

La navigation par dots est un classique des landing pages et des one-pages. Cas d'usage :

Landing pages avec sections bien définies
Sites one-page de présentation ou de portfolio
Articles avec chapitres longs

Scrollez dans la zone pour voir les dots se mettre à jour

Section 1, Introduction

Le contenu de cette section s'affiche ici.

Section 2, Fonctionnalités

Les fonctionnalités principales sont décrites ici.

Section 3, Tarifs

Les offres et tarifs sont présentés ici.

Section 4, Contact

Le formulaire de contact se trouve ici.

Comment créer une navigation par sections avec dots dans Webflow ?