fbpx
León Desarrollo - Programación WordPress
Diseño gráfico

Cabecera fija con cambio de fondo


Puedes lograr un encabezado (header) fijo con un comportamiento de cambio de color de fondo según el desplazamiento de la página utilizando CSS y un poco de JavaScript. Aquí tienes un ejemplo de cómo hacerlo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Header Fijo con Cambio de Color</title>
</head>
<body>
  <header class="fixed-header">
    <h1>Encabezado</h1>
  </header>
  
  <div class="content">
    <!-- Contenido de la página -->
  </div>
  
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7); /* Color de fondo inicial */
  color: #fff;
  transition: background-color 0.3s ease-in-out;
}

.scrolled-header {
  background-color: #3498db; /* Nuevo color de fondo al hacer scroll */
}

JavaScript (script.js):

window.addEventListener("scroll", function() {
  const header = document.querySelector(".fixed-header");
  if (window.scrollY === 0) {
    header.classList.remove("scrolled-header");
  } else {
    header.classList.add("scrolled-header");
  }
});

En este ejemplo, el encabezado tiene la clase .fixed-header, que tiene un color de fondo inicial establecido. Luego, utilizando JavaScript, hemos agregado un evento de desplazamiento (scroll) al objeto window. Cuando el desplazamiento vertical (scrollY) es igual a 0, el encabezado recupera su color de fondo original; de lo contrario, se le añade la clase scrolled-header, que cambia su color de fondo. La transición se gestiona con la propiedad transition en el CSS.

A medida que los usuarios hacen scroll en la página, el encabezado cambia su color de fondo de forma suave. Puedes ajustar los colores y estilos según tus preferencias.

Suscríbete

Si quieres estar al día con las novedades de este sitio te recomiendo que te suscribas.

Comentarios

Deja un comentario


Puede que también te interese

2018 animaciones animación Aranda array atributos añade base de datos buscar categoría css curso diseño Duero emprendimiento fechas fiduero guía imagen imagenes inauguracion instalar Isilla javascript linux local mac node.js pagina pagina web php post problemas producto servicio servidor solución split sql sql server stock string windows woocommerce wordpress

abril 2024
L M X J V S D
1234567
891011121314
15161718192021
22232425262728
2930  
  1. Hola, Muchas gracias por ofrecernos este contenido de calidad, es muy difícil encontrar contenido así en nuestro idioma. Aprovechando este…