Básicamente, supongamos que tengo 10 secciones. Cada uno tiene asignado un color diferente para el color de fondo.

Cuando el usuario se desplaza hacia abajo desde las secciones 1 a 10, me gustaría que el color de fondo de la etiqueta cambie según la sección que esté en la pantalla.

Suponiendo que la altura de la ventana gráfica es de 1000 px, me gustaría que la función averiguara qué sección se encuentra actualmente en 800 px de 1000 px, por lo que el 20 % inferior, luego busque el color de fondo de esa sección en el 20 % inferior y aplíquelo a la etiqueta hasta que el usuario se desplace a la siguiente sección o se desplace hacia arriba y otro componente tome el color de fondo.

He intentado usar IntersectionObservor para esto, pero no creo que sea el mejor enfoque para lo que quiero.

Actualmente, mi configuración es, estoy renderizando varios componentes uno tras otro, cada uno de ellos tiene un atributo de datos de "fondo de datos = {fondo}"

Luego, el observador recorre, los agrega todos al observador y observa para encontrar cuál está en la pantalla, pero no funciona completamente para lo que necesito.

¿Hay una manera más fácil de lograr lo que estoy buscando?

Aquí está el código que tengo hasta ahora

 import Page from "../components/common/Page"; import Hero from "../components/molecules/Hero"; import TechStack from "@/components/organisms/TechStack"; import { useEffect } from "react"; const Home = () => { useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { console.log("entry", entry); if (entry.isIntersecting) { document.body.style.backgroundColor = entry.target.dataset.background; } }); }, { threshold: [0.20] } ); // create an array of all the components to be watched const components = [...document.querySelectorAll("[data-background]")]; components.forEach((component) => { observer.observe(component); }); }, []); return ( <Page seo={{ title: "Starter Kit" }}> <Hero /> <TechStack background="white"/> <TechStack background="grey" /> <TechStack background="blue"/> <TechStack background="green"/> <TechStack background="grey"/> <TechStack background="white"/> </Page> ); }; export default Home;