Tengo un código simple que usa IntersectionObserver, que básicamente dice cuándo un objeto está visible en la pantalla, cuando eso sucede, quiero que un título cambie al mismo nombre de ese elemento visible. El caso es que he creado 5 variables diferentes para cada observador relacionadas con cada una de las 5 áreas próximas. ¿Hay alguna manera de simplificar este código?
En este momento funciona, pero me parece que está mal y no puedo encontrar la manera de fusionarlos a todos.
¡¡Gracias por adelantado!!
var observer = new IntersectionObserver(function(entries) { if(entries[0].isIntersecting === true) document.querySelector(".productTitle").innerHTML = "Logotype"; }, { threshold: [1] }); var observer1 = new IntersectionObserver(function(entries) { if(entries[0].isIntersecting === true) document.querySelector(".productTitle").innerHTML = "Branding"; }, { threshold: [1] }); var observer2 = new IntersectionObserver(function(entries) { if(entries[0].isIntersecting === true) document.querySelector(".productTitle").innerHTML = "Website Dev."; }, { threshold: [1] }); var observer3 = new IntersectionObserver(function(entries) { if(entries[0].isIntersecting === true) document.querySelector(".productTitle").innerHTML = "3d Modeling"; }, { threshold: [1] }); var observer4 = new IntersectionObserver(function(entries) { if(entries[0].isIntersecting === true) document.querySelector(".productTitle").innerHTML = "Vectorial Work"; }, { threshold: [1] }); observer.observe(document.querySelector("#visibleLogo")); observer1.observe(document.querySelector("#visibleBranding")); observer2.observe(document.querySelector("#visibleWeb")); observer3.observe(document.querySelector("#visible3d")); observer4.observe(document.querySelector("#visibleVector"));.page a sus artículos Elementos.page deseadas dentro de .forEach() .data-* para almacenar el título deseado en el propio HTML como, por ejemplo: data-title="Title to show when in viewport" const elTitle = document.querySelector(".productTitle"); const pageInViewport = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { elTitle.textContent = entry.target.dataset.title; } }); }; const pageObs = new IntersectionObserver(pageInViewport); const obsOptions = {threshold: [1]}; // Attach observer to every .page element: document.querySelectorAll('.page') .forEach(EL => pageObs.observe(EL, obsOptions)); * { margin: 0; box-sizing: border-box; } .productTitle { position: fixed; top: 0; background: gold; } .page { padding: 30px; border: 1px solid #000; height: 100vh; } <div class="productTitle"></div> <div class="page" id="visibleLogo" data-title="Logotype">visibleLogo</div> <div class="page" id="visibleBranding" data-title="Branding">visibleBranding</div> <div class="page" id="visibleWeb" data-title="Website Dev.">visibleWeb</div> <div class="page" id="visible3d" data-title="3d Modeling">visible3d</div> <div class="page" id="visibleVector" data-title="Vectorial Work">visibleVector</div>