Hemos dado un documento HTML que contiene algunas propiedades CSS, y la tarea es cambiar la propiedad CSS a un elemento en particular después de desplazarse por la página usando jQuery. Para cambiar el estilo del elemento en el desplazamiento, obtenemos el número de píxeles por los que el contenido de un elemento se ha desplazado horizontal o verticalmente.
El siguiente ejemplo ilustra cómo cambiar el estilo de los elementos a medida que se desplazan. Una forma de cambiar el estilo de los elementos a medida que se desplazan es cambiar la clase a la que pertenecen los elementos.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to change style of elements
on scroll using jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
.classinitial {
height: 200px;
background-color: rgba(255, 255, 255, 0.5);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
background-clip: border-box;
border-width: 5px;
border-style: solid;
}
.classfinal {
height: 100px;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
border-width: 8px;
border-style: solid;
}
.wrapper {
height: 2000px;
padding-top: 200px;
color: green;
text-align: center;
font-size: larger;
font-weight: bold;
}
</style>
</head>
<body>
<header class="classinitial"></header>
<div class="wrapper">
Geeks For Geeks
</div>
<script>
$(function () {
var header = $(".classinitial");
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 155) {
header.removeClass('classinitial')
.addClass("classfinal");
} else {
header.removeClass("classfinal")
.addClass('classinitial');
}
});
});
</script>
</body>
</html>
El código anterior agrega estilo tanto a la clase inicial como a la clase final (llamadas classinitial y classfinal según el código) con la ayuda de las propiedades de estilo CSS. A continuación se muestra el código JavaScript que ayuda a cambiar la clase del elemento de encabezado presente en el código html.
El código jQuery cambia la clase del elemento de encabezado de classinitial a classfinal si la página se desplaza verticalmente 155 píxeles. Y cambia la clase de classfinal a classinitial de lo contrario. Para este propósito, los métodos jQuery addClass() y removeClass() se utilizan en el código anterior. Aquí, la función scrollTop() se usa para obtener el número de píxeles por los que se desplaza el elemento y se guarda dentro de la variable llamada scroll.
Producción:
Publicación traducida automáticamente
Artículo escrito por MugdhaBehere y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA