<div class="ss-shell">
  <nav class="ss-nav" id="ssNav">
    <a href="#ss-overview" class="ss-link" data-target="ss-overview">Overview</a>
    <a href="#ss-features" class="ss-link" data-target="ss-features">Features</a>
    <a href="#ss-pricing" class="ss-link" data-target="ss-pricing">Pricing</a>
    <a href="#ss-faq" class="ss-link" data-target="ss-faq">FAQ</a>
    <a href="#ss-contact" class="ss-link" data-target="ss-contact">Contact</a>
  </nav>
  <div class="ss-content" id="ssContent">
    <section class="ss-section" id="ss-overview">
      <h3>Overview</h3>
      <p>This scrollable panel contains five sections. As you scroll through the content on the right, the matching link on the left highlights automatically to reflect which section is currently in view.</p>
    </section>
    <section class="ss-section" id="ss-features">
      <h3>Features</h3>
      <p>The highlighting is driven entirely by an IntersectionObserver watching all five sections at once, rather than manual scroll-position math or scroll event listeners.</p>
    </section>
    <section class="ss-section" id="ss-pricing">
      <h3>Pricing</h3>
      <p>Because the observer's threshold and root are tuned to this internal scroll container, the active link updates correctly even though the outer page itself never scrolls.</p>
    </section>
    <section class="ss-section" id="ss-faq">
      <h3>FAQ</h3>
      <p>Clicking a nav link smooth-scrolls the content area to the matching section, and the observer then takes over to keep the highlight in sync as you continue scrolling manually.</p>
    </section>
    <section class="ss-section" id="ss-contact">
      <h3>Contact</h3>
      <p>This is the final section. Scrolling to the bottom keeps the last link highlighted since it remains the most visible section within the observer's threshold.</p>
    </section>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.ss-shell {
  display: grid; grid-template-columns: 160px 1fr; gap: 20px; width: 100%; max-width: 620px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px;
}

.ss-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; align-self: start; }
.ss-link {
  text-decoration: none; color: #64748b; font-size: 13px; font-weight: 600; padding: 8px 10px;
  border-radius: 8px; border-left: 3px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.ss-link:hover { background: #f8fafc; color: #1e293b; }
.ss-link.ss-active { color: #6366f1; font-weight: 800; background: #eef2ff; border-left-color: #6366f1; }

.ss-content { max-height: 360px; overflow-y: auto; padding-right: 6px; }
.ss-section { padding: 18px 4px; border-bottom: 1px solid #f1f5f9; min-height: 160px; }
.ss-section:last-child { border-bottom: none; }
.ss-section h3 { font-size: 15px; font-weight: 800; color: #1e293b; margin-bottom: 8px; }
.ss-section p { font-size: 13px; color: #64748b; line-height: 1.7; }

const links = document.querySelectorAll('.ss-link');
const sections = document.querySelectorAll('.ss-section');
const content = document.getElementById('ssContent');

function setActive(id) {
  links.forEach((link) => {
    link.classList.toggle('ss-active', link.dataset.target === id);
  });
}

const observer = new IntersectionObserver((entries) => {
  const visible = entries.filter((e) => e.isIntersecting);
  if (visible.length === 0) return;
  const topMost = visible.reduce((a, b) => (a.intersectionRatio > b.intersectionRatio ? a : b));
  setActive(topMost.target.id);
}, {
  root: content,
  rootMargin: '-10% 0px -60% 0px',
  threshold: [0, 0.25, 0.5, 0.75, 1],
});

sections.forEach((section) => observer.observe(section));

links.forEach((link) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const target = document.getElementById(link.dataset.target);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
});

setActive(sections[0].id);