FrankZamora d5fe816add [NIVEL 3] Issue #55 - TOC ScrollSpy con IntersectionObserver ...

Implementación completa de TOC sticky con scrollspy avanzado según Issue #55.

**Cambios en toc.css:**
- TOC sticky: position: sticky, top: 5.5rem, z-index: 10
- Border-left en links: 3px solid transparent (activo: #0d6efd)
- Scrollbar personalizado: width 6px, color #cbd5e0, hover #a0aec0
- Ajustados padding/margin para border-left

**Cambios en toc.js:**
- Reemplazado scroll handler por IntersectionObserver
- rootMargin: '-20% 0px -35% 0px' para detección óptima
- Tracking de headings visibles con Set
- Active link basado en primer heading visible
- Renombrado updateActiveLink → updateActiveLinkOnClick (evitar conflicto)
- Mantiene smooth scroll y reduce-motion support

**Características:**
✅ TOC sticky funcional con top: 5.5rem
✅ ScrollSpy con IntersectionObserver (rootMargin personalizado)
✅ Border-left 3px solid en active links
✅ Scrollbar width 6px, color #cbd5e0
✅ Smooth scroll con offset dinámico
✅ Performance optimizado (sin scroll events)
✅ Compatible todos los browsers modernos

Closes #55

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-04 20:09:45 -06:00

6.8 KiB

Raw Blame History

View Raw