En este capítulo haremos un ejercicio en el que utilizaremos bastante CSS. Haremos un menú móvil vertical para Desktop, puesto que hasta ahora el único menú que teníamos era el que aparecía en el medio, y era para todos los dispositivos (Desktop, Mobile…). Vamos a utilizar lo que se denomina ScrollSpy (scroll espía), que lo que hace es que cuando el elemento está visible para el navegador se detecta la parte del menú que estamos visitando, la cual aparecerá activa.
Lo que crearemos es una @mediaquery a 1024px mediante el código
@media screen and (min-width: 1024px) {
/* Nuestro código CSS */
}
Esto lo hacemos para dispositivos de escritorio. También vamos a aplicar cierta maquetación Grid CSS al body. Para este ejercicio vamos a utilizar un API denominado Intersection Observer, que lo que hace es detectar cuando en la parte visible del viewport de nuestro navegador se encuentra un elemento.
Para este ejercicio hemos creado un archivo nuevo que trae todo el código Javascript incluido para crear nuestro scroll espía, llamado scroll_espia.js, que va a albergar la función scrollSpy().
Archivos
Los archivos incluidos en este ejercicios los puedes bajar del siguiente enlace.