Pretty new to code so forgive me if I stumble around some wording here, but I’m trying to use IntersectObserver to show a specific image when its corresponding text is shown in a scroll menu. Right now the appropriate images appear when the text is shown in the scroll menu, however, they appear in a flexbox column type manner and I would like them to replace each other once the text is no longer intersecting with the scroll menu. Are there any ideas how I might be able to do this?
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)
})
