[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>
This commit is contained in:
@@ -19,7 +19,9 @@
|
||||
padding: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: 5.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.apus-toc-header {
|
||||
@@ -170,11 +172,13 @@
|
||||
.apus-toc-link {
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: color 0.2s ease, transform 0.2s ease;
|
||||
display: block;
|
||||
transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
padding: 0.25rem 0;
|
||||
padding: 0.25rem 0 0.25rem 1rem;
|
||||
border-left: 3px solid transparent;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.apus-toc-link:hover {
|
||||
@@ -188,22 +192,11 @@
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Active link highlighting */
|
||||
/* Active link highlighting - Issue #55 */
|
||||
.apus-toc-link.active {
|
||||
color: #0d6efd;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.apus-toc-link.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: #0d6efd;
|
||||
border-radius: 2px;
|
||||
border-left-color: #0d6efd;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -348,16 +341,16 @@ h3[id] {
|
||||
}
|
||||
|
||||
.apus-toc-list::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
background: #cbd5e0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.apus-toc-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
background: #a0aec0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.apus-toc-list {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #888 #f1f1f1;
|
||||
scrollbar-color: #cbd5e0 #f1f1f1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user