My project has a plethora of intersection observers, however, one has an issue of sorts.

The issue: when my .navBarContainer intersects with my other divs that are also being watched by Intersection Observers, my .navBarContainer reacts with an animation that is NOT attached to it.

My .navBarContainer is only supposed to change colors when it is no longer intersection with the header, however, after intersecting with another div, it may slide in from the right.

I don't understand why this is happening, and I am having trouble fixing the issue.

Examples of my code:

const header = document.querySelector(".navBarContainer");
const imageHeader = document.querySelector(".myImageHeader");

const imageHeaderOptions = {
  rootMargin: "-75px 0px 0px 0px"
};

const imageHeaderObserver = new IntersectionObserver(function(
  entries
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      header.classList.add("scrolled");
    } else {
      header.classList.remove("scrolled");
    }
  });
},
imageHeaderOptions);

imageHeaderObserver.observe(imageHeader);



const sLoader = document.querySelector(".services");
const options = {
   root: null,
   threshhold: 1
 }
const observer = new IntersectionObserver(function(entries, observer){
   entries.forEach(entry => {
      entry.target.classList.toggle("show", entry.isIntersecting)
   })
}, options)

observer.observe(sLoader)