En este mini tutorial vamos a ver cómo añadir o quitar clases de CSS en Javascript cuando el usuario hace scroll vertical. Eso puede ser útil, por ejemplo, si necesitamos cambiar el estilo CSS basado de la posición del usuario dentro de la página web:
El código es el siguiente:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$("header").addClass("cabeceraOscura");
}else{
$("header").removeClass("cabeceraOscura");
}
});Como podemos ver en el código de ejemplo anterior, cuando el usuario se sitúa a 200 o más píxeles de la parte superior de la página, se añade la clase “cabeceraOscura” en el header, pero cuando el usuario está a menos de 200 píxeles, la clase “cabeceraOscura” se elimina. Podemos cambiar 200 por cualquier otra cifra y header por cualquier otro selector.
A la hora de añadir estilos para la clase “cabeceraOscura”, lo mas recomendable es crear un selector lo mas preciso posible, de esta forma evitamos que se solapen los CSS:
header.cabeceraOscura{
/* Tus CSS */
}