contenido se mueva y el menú lateral se mantenga fijo

Clave del funcionamiento

El truco está en separar visualmente el menú lateral del área de contenido usando flexbox y aplicar el scroll solo al contenedor del contenido, no a toda la página.

📐 Estructura HTML clave

html

<div class="contenedor-flex">        ← Contenedor flex
    <div class="menu-lateral">       ← Menú lateral (NUNCA hace scroll)
        <a href="#js-intro">...</a>
    </div>
    <div class="contenedor-centrado"> ← Este SÍ hace scroll
        <div class="contenido">
            <h2 id="js-intro">...</h2>
        </div>
    </div>
</div>

🎨 CSS fundamental (3 reglas mágicas)

1️⃣ El body debe tener altura fija

css

body {
    height: 100vh;           /* Altura = 100% de la ventana */
    display: flex;
    flex-direction: column;
}

2️⃣ El contenedor flex padre debe tener flex: 1 y min-height: 0

css

.contenedor-flex {
    display: flex;
    flex: 1;                 /* Ocupa todo el espacio disponible */
    min-height: 0;           /* ← CLAVE: permite que los hijos se encojan */
}

3️⃣ El contenedor del contenido debe tener overflow-y: auto y scroll-behavior: smooth

css

.contenedor-centrado {
    flex: 1;                 /* Ocupa el espacio restante */
    overflow-y: auto;        /* ← CLAVE: SOLO este contenedor hace scroll */
    scroll-behavior: smooth; /* ← Desplazamiento suave al hacer clic */
}

🧠 ¿Por qué funciona así?

Elemento	¿Hace scroll?	¿Por qué?
body	❌ No	Solo organiza el layout vertical
.menu-lateral	❌ No	No tiene overflow-y: auto
.contenedor-centrado	✅ Sí	Tiene overflow-y: auto y ocupa el espacio restante

Cuando haces clic en un enlace del menú (href="#js-intro"), el navegador busca ese id dentro del documento. Pero como el scroll solo está habilitado en .contenedor-centrado, el desplazamiento ocurre DENTRO de ese contenedor, moviendo el contenido pero dejando el menú lateral completamente quieto.

🔄 Flujo visual

text

[Menú superior fijo]
┌────────────┬─────────────────────┐
│            │                     │
│  Menú      │   ÁREA DE SCROLL    │
│  Lateral   │   ┌─────────────┐   │
│  (fijo)    │   │ Contenido   │   │
│            │   │ que se mueve│   │
│  • Enlace1 │   │ ↓           │   │
│  • Enlace2 │   │ ↓           │   │
│  • Enlace3 │   │ ↓           │   │
│            │   └─────────────┘   │
└────────────┴─────────────────────┘
     ↑                    ↑
  NO scroll            SÍ scroll

📝 Resumen de la receta mágica

1. Body con height: 100vh y display: flex

2. Contenedor padre con flex: 1 y min-height: 0

3. Contenedor del contenido con overflow-y: auto

4. Menú lateral sin overflow (o con su propio scroll si tiene muchos enlaces)

5. Enlaces del menú apuntando a #id de las secciones

¡Así de simple! El truco es darle el scroll solo a la parte que queremos que se mueva, no a toda la página.