Drag

Ajouter

Lorem ipsum

Design

59 vues

4 min

Comment créer un sommaire sticky avec section active dans Webflow ?

Apprenez à créer un sommaire sticky qui met en surbrillance la section en cours de lecture dans Webflow.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un sommaire sticky qui met en surbrillance la section en cours de lecture dans Webflow.

Exemple

Scrollez dans la zone article pour voir la section active dans le sommaire

Introduction

Webflow est un outil no-code qui génère du code propre et performant pour les équipes modernes.

Installation

Créez un compte sur webflow.com et démarrez un nouveau projet depuis les templates disponibles.

Configuration

Définissez vos variables CSS, votre système de couleurs et vos breakpoints responsive.

Publication

Connectez votre domaine et publiez en un clic depuis le Designer Webflow.

Sommaire

Élément	ID/Classe	Description
Conteneur sommaire	id='sticky-toc'	Positionné en sticky dans une sidebar
Zone article	class='article-content'	Source des H2 analysés
Section active	Bordure violette	Mise à jour au scroll automatiquement

1. Créez la structure dans Webflow

Créez une mise en page deux colonnes : colonne gauche pour l'article (classe article-content), colonne droite pour le sommaire. Dans la colonne droite, créez un Div avec l'ID sticky-toc et appliquez position: sticky; top: 24px;. Mettez-le en display: none par défaut.

2. Ajoutez le script dans Footer code

(function() {
  var toc = document.getElementById('sticky-toc');
  var content = document.querySelector('.article-content');
  if (!toc || !content) return;

  var headings = content.querySelectorAll('h2');
  if (headings.length < 2) return;

  var ul = document.createElement('ul');
  ul.style.cssText = 'list-style:none;padding:0;margin:0;';

  headings.forEach(function(h, i) {
    if (!h.id) h.id = 'section-' + i;
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = '#' + h.id;
    a.textContent = h.textContent;
    a.dataset.target = h.id;
    a.style.cssText = 'display:block;padding:6px 12px;font-size:13px;color:#6b7280;' +
      'text-decoration:none;border-left:2px solid transparent;transition:all 0.15s;' +
      'border-radius:0 6px 6px 0;';
    a.addEventListener('click', function(e) {
      e.preventDefault();
      document.getElementById(h.id).scrollIntoView({ behavior: 'smooth' });
    });
    li.appendChild(a);
    ul.appendChild(li);
  });

  toc.appendChild(ul);
  toc.style.display = 'block';

  // Highlight active section
  window.addEventListener('scroll', function() {
    var active = null;
    headings.forEach(function(h) {
      if (h.getBoundingClientRect().top <= 120) active = h.id;
    });
    toc.querySelectorAll('a').forEach(function(a) {
      var isActive = a.dataset.target === active;
      a.style.color = isActive ? '#111' : '#6b7280';
      a.style.fontWeight = isActive ? '500' : '400';
      a.style.borderLeftColor = isActive ? '#a78bfa' : 'transparent';
      a.style.background = isActive ? 'rgba(167,139,250,0.08)' : 'transparent';
    });
  }, { passive: true });
})();