Drag

Ajouter

Lorem ipsum

Design

28 views

4 min

How to Create a Sticky Table of Contents with an Active Section in Webflow

Learn how to create a sticky table of contents that highlights the section you're currently reading in Webflow.

In this tutorial, Sandro, cofounder of Gemeos Agency, a Webflow agency, shows you how to create a sticky table of contents that highlights the section you’re currently reading in Webflow.

Example

Scroll through the article area to see the active section in the table of contents

Introduction

Webflow is a no-code tool that generates clean, high-performance code for modern teams.

Setup

Create an account on webflow.com and start a new project from the available templates.

Configuration

Define your CSS variables, color system, and responsive breakpoints.

Publishing

Connect your domain and publish in one click from the Webflow Designer.

Table of contents

Element	ID/Class	Description
Table of contents container	id='sticky-toc'	Sticky-positioned in a sidebar
Article area	class='article-content'	Source of the H2s being analyzed
Active section	Purple border	Updated automatically on scroll

1. Build the structure in Webflow

Create a two-column layout: left column for the article (class article-content), right column for the table of contents. In the right column, create a Div with the ID sticky-toc and apply position: sticky; top: 24px;. Set it to display: none by default.

2. Add the script in 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 });
})();