Estoy tratando de cambiar el color de fondo de mi página web al desplazarme usando IntersectionObserver; este es el código que tengo hasta ahora:
const callback = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { style.backgroundColor = entry.target.getAttribute('data-color'); } }); }; const changes = document.querySelectorAll('.change'); const observer = new IntersectionObserver(callback); changes.forEach(change => { observer.observe(change); });Me gustaría que cambie de color cuando el espectador se desplace a un div, posiblemente usando algo como
<div id= "indiaText" class="change" data-color="orange">¿Alguien tiene una idea de cómo puedo lograr esto? También probé $(window).scroll(function() { sin embargo, solo obtengo un error al usar este método. Gracias.
Casi lo tenías.
El único problema real era que la línea style.backgroundColor = arrojaba una excepción porque el style no estaba declarado/definido. lo cambié a document.body.style.backgroundColor .
Modifiqué un par de otras cosas, pero estas no son críticas:
{ threshold: .5 } al IntersectionObserver para que el cambio de color no ocurra hasta que el div objetivo sea 50% en la pantalla.body solo para suavizar el cambio de color. const callback = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { document.body.style.backgroundColor = entry.target.dataset.color; } }); }; const changes = document.querySelectorAll('.change'); const observer = new IntersectionObserver(callback, { threshold: .5 }); changes.forEach(change => { observer.observe(change); }); body { transition: .5s background-color; } .change { min-height: 100vh; background-color: white; width: 50%; margin: 40px auto; } <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div> <div class="change" data-color="orange">orange</div> <div class="change" data-color="blue">blue</div> <div class="change" data-color="lavender">lavender</div>Simplemente actualice la función de devolución de llamada:
if (entry.isIntersecting) { document.body.style.background = entry.target.getAttribute('data-color'); //to change the background of the div // entry.target.style.background = entry.target.getAttribute('data-color'); }