7/02/2015 javascript 5m 14s 2 13516 4.5
Con Javascript podemos validar los campos de un formulario que un usuario envia en una pagina web antes de que sean enviados y validados en el...
Añadir una clase a un elemento al hacer scroll con Javascript
15 de /julio07 de /2023
1m 14s
javascript
0 comentarios
106
Este ejemplo añade una clase a un elemento cuando el usuario hace scroll. Es útil para cambiar el estilo de una barra de navegación, fijarla, oscurecerla o activar cualquier efecto visual al desplazarse por la página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS */
.navbar-scrolled {
background-color: rgba(0, 0, 0, 0.8);
transition: background-color 0.3s ease;
}
</style>
</head>
<body>
<!-- HTML -->
<nav id="navbar">Tu navegación aquí</nav>
<script>
// JavaScript
window.addEventListener('scroll', function () {
const navbar = document.getElementById('navbar');
if (window.scrollY > 0) {
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
});
</script>
</body>
</html>
Cómo funciona:
Cuando el usuario hace scroll, el script comprueba si window.scrollY es mayor que 0.
Si lo es, añade la clase .navbar-scrolled; si no, la elimina.
El CSS se encarga de aplicar el estilo cuando la clase está activa.
Quizás te interese ...
1/09/2014 javascript 3m 13s 1 3536 5
Principalmente, la mayor parte de las aplicaciones mas complejas, deben acceder al valor de alguna variable, para ello dedemos escribir dentro...
1/04/2014 javascript 4m 40s 0 9137
Un reloj es una herramienta muy util en algunas aplicaciones web como formularios o aplicaciones, por ejemplo formularios que necesitan guardar...
1/03/2014 javascript 1m 58s 1 6272 5
Con este script muy sencillo podemos conocer los datos del navegador y mostrarlos en pantalla, dentro de etiquetas script escribimos un...
Valoraciones
Sé el primero en valorar