Cambiar un elemento al hacer scroll con jQuery

En este tutorial vamos a ver cómo puedes modificar un elemento de la interfaz a medida que haces scroll por la página. Para ello usaremos la librería jQuery. En caso de que no sepas utilizar jQuery, consulta primero el tutorial de introducción a jQuery, en donde aprenderás a instalarlo y a utilizarlo.

En algunas ocasiones querrás cambiar algún elemento de la página cuando te desplazas por ella; algo muy habitual en los menús de navegación. En este caso, modificaremos la parte correspondiente al menú de navegación de la página al llegar a un determinado punto. Cambiaremos el color y haremos que el menú se mantenga fijo en la parte superior de la página, aunque también podrías modificarlo de otro modo, como por ejemplo haciendo que sea más estrecho.

Antes de comenzar, asegúrate de incluir el script de jQuery en tu proyecto.

Versión simplificada

Primero vamos a agregar el código HTML, que simplemente consistirá en un menú y en un elemento que será el que marque el cambio. Ya hemos visto en otro tutorial cómo crear un menú dropdown con jQuery, así que en este caso nos limitaremos a representarlo del modo más sencillo posible:

<nav>Menú</nav>

<div id="cambio">Punto de cambio</div>

Ahora vamos a agregar el código jQuery, que ejecutará la siguiente función cada vez que hagamos scroll:

$(window).on("scroll", function () {
  if ($(window).scrollTop() > $("#cambio").offset().top - 50) {
    $("nav").addClass("active");
  } else {
    $("nav").removeClass("active");
  };
});

Lo que hemos hecho es comprobar si se ha llegado al elemento #cambio haciendo scroll. Para ello comparamos la altura a la que está el elemento #cambio con la distancia recorrida haciendo scroll y, en caso de ser esta última distancia mayor, agregamos la clase .active el menú. De lo contrario, eliminamos la clase .active.

Ahora vamos a agregar los estilos CSS, en los que también definiremos la posición de los elementos:

html {
  height: 800px;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: #000;
  color: #fff;
  height: 50px;
  line-height: 50px;
  transition: .3s all ease;
}

nav.active {
  background: blue;
}

#cambio {
  margin-top: 300px;
  border-top: 1px solid blue;
}

Y con esto ya tendríamos la funcionalidad deseada. Puedes ver el resultado en funcionamiento aquí.

Versión avanzada

Ahora vamos a hacer que el resultado que hemos obtenido sea algo más atractivo visualmente hablando. Vamos a agregar una cabecera para agregar algo de espacio:

<nav>Menú</nav>

<header></header>

<div id="cambio">Punto de cambio</div>

Y ahora también agregaremos estos estilos CSS:

html {
  min-height: 100%;
  font-family: 'Nunito', sans-serif;
}

body {
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

nav {
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  background: transparent;
  color: #fff;
  padding: 0 1rem;
  font-size: 1.8rem;
  height: 80px;
  line-height: 80px;
  transition: .3s all ease;
}

nav.active {
  background: #108040;
}

header {
  height: 50vh;
  background: #7db4fc;
}

#cambio {
  height: 150vh;
  padding: 60px 0;
  text-align: center;
  color: #fff;
  background: #111;
}

Si quieres, puedes ver el resultado en funcionamiento aquí.

Y esto ha sido todo.

---