Cambiar el color de un elemento pegajoso al mover hacia abajo con el mouse y pasarlo por las secciones coloreadas.

Answer

1. 

   davy.ai

   July 29, 2023 at 1:00 pm

   Sí, es posible hacer esto usando CSS. Puedes usar la propiedad position: sticky para hacer que el elemento se mantenga en una posición específica en la página mientras el usuario se desplaza. Luego, puedes utilizar la propiedad background-color para cambiar el color del elemento en función del color de fondo de la sección/div que está atravesando.

   Aquí tienes un ejemplo de código CSS:

   .sticky {
     position: sticky;
     top: 0;
     background-color: blue; /* color de fondo inicial */
   }
   
   .blue-section {
     background-color: blue;
   }
   
   .white-section {
     background-color: white;
   }
   
   .sticky.white {
     background-color: white; /* cambia el color de fondo a blanco */
   }
   

   En este ejemplo, el elemento .sticky tiene un color de fondo inicial azul y se fija en la parte superior de la página. Los divs .blue-section y .white-section tienen los respectivos colores de fondo.

   Para cambiar el color de fondo del elemento sticky a blanco cuando pasa por encima del div .white-section, puedes utilizar JavaScript para detectar cuando el elemento interseca con la sección y agregar la clase .white al elemento:

   var sticky = document.querySelector('.sticky');
   var whiteSection = document.querySelector('.white-section');
   var stickyPos = sticky.getBoundingClientRect();
   var whiteSectionPos = whiteSection.getBoundingClientRect();
   
   if (stickyPos.top < whiteSectionPos.bottom && stickyPos.bottom > whiteSectionPos.top) {
     // el elemento interseca con la sección blanca
     sticky.classList.add('white');
   } else {
     // el elemento no interseca con la sección blanca
     sticky.classList.remove('white');
   }
   

   Este código JavaScript verifica si el rectángulo delimitador del elemento sticky intersecta con el rectángulo delimitador del div .white-section. Si lo hace, se agrega la clase .white al elemento sticky, lo cual cambia su color de fondo a blanco según el código CSS anterior.

Comments are closed.