How do you create a sticky table of contents in Webflow?

(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 });
})();