vonWenzel
New Coder
I’m trying to use an observer script to show / hide divs as others enter viewport. Below is the script I’m using. It works for the first two items, then fails when the third scrolls into view. Any idea why would be appreciated!
JavaScript:
<script type="text/javascript">
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting === true){
// on screen
document.getElementById('feel-1').classList.add('is-visible');
document.getElementById('feel-1').classList.remove('is-hidden');
} else {
// not on screen
document.getElementById('feel-1').classList.add('is-hidden');
document.getElementById('feel-1').classList.remove('is-visible');
}
if(entries[1].isIntersecting === true){
document.getElementById('feel-2').classList.add('is-visible');
document.getElementById('feel-2').classList.remove('is-hidden');
} else {
// not on screen
document.getElementById('feel-2').classList.add('is-hidden');
document.getElementById('feel-2').classList.remove('is-visible');
}
if(entries[2].isIntersecting === true){
document.getElementById('feel-3').classList.add('is-visible');
document.getElementById('feel-3').classList.remove('is-hidden');
} else {
// not on screen
document.getElementById('feel-3').classList.add('is-hidden');
document.getElementById('feel-3').classList.remove('is-visible');
}{ threshold: [1] }
});
observer.observe(document.querySelector("#middle-1"));
observer.observe(document.querySelector("#middle-2"));
observer.observe(document.querySelector("#middle-3"));
</script>
