Bastante nuevo en el código, así que discúlpeme si me tropiezo con algunas palabras aquí, pero estoy tratando de usar IntersectObserver para mostrar una imagen específica cuando su texto correspondiente se muestra en un menú de desplazamiento. En este momento, las imágenes apropiadas aparecen cuando el texto se muestra en el menú de desplazamiento, sin embargo, aparecen en forma de columna de cuadro flexible y me gustaría que se reemplacen entre sí una vez que el texto ya no se cruce con el menú de desplazamiento. ¿Hay alguna idea de cómo podría hacer esto?

 const observer = new IntersectionObserver(entries => { entries.forEach(elem => { if (elem.isIntersecting) { const append = $(elem.target).append() const text = $(elem.target).text() switch (append, text) { case 'ALEX': $('.image-content').append("<img class='img' src='images/ALEX.gif'/>") break case 'CHANEL': $('.image-content').append("<img class='img' src='images/CHANEL.gif'/>") break case 'LAURA': $('.image-content').append("<img class='img' src='images/LAURA.gif'/>") break case 'NATHAN': $('.image-content').append("<img class='img' src='images/NATHAN.gif'/>") break case 'RON': $('.image-content').append("<img class='img' src='images/RON.gif'/>") break case 'STACEY': $('.image-content').append("<img class='img' src='images/STACEY.gif'/>") break case 'VINCE': $('.image-content').append("<img class='img' src='images/VINCE.gif'/>") break default: $('.image-content').text(`Sorry, no more companions available ${text}.`) } } }) }) // Select all the options in the left $('.companion-names').each(function () { // For each item we want to observe whether it is visible using the function above observer.observe(this) })