How to Create Section Navigation with Dots in Webflow

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