Пересечение Наблюдатель с несколькими липкими элементами

Question

Я пытаюсь создать динамическую c тень. У меня есть два липких элемента, и пока я прокручиваю один элемент, присоединяющийся к левой стороне, должна появиться тень блока, после продолжения прокрутки второй элемент присоединяется к этому первому элементу, а тень от окна теперь появляется после второго. элемент. Я использую Intersection Observer (IO) здесь. Я создаю новый div "separator" перед этими закрепленными элементами, чтобы увидеть, когда этот div покидает область просмотра, чтобы могла появиться тень блока. И как я правильно понимаю, когда мой первый разделитель покидает область просмотра, в нужный момент появляется тень блока, но когда мой второй закрепленный элемент div прикрепляется к первому, мне все равно нужно прокрутить дальше, чтобы мой второй разделитель div покинул область просмотра .

const content = document.querySelector('.content');
const wrapper = document.querySelector('.wrapper');
const stickyElements = document.querySelectorAll('.sticky');

stickyElements.forEach(stickyElement => {
  const newDiv = document.createElement("div");
  newDiv.className = "separator";
  wrapper.insertBefore(newDiv, stickyElement);

  //to check when element get's position sticky
  var observer = new IntersectionObserver(function(entries) {
    // no intersection 
    if (entries[0].intersectionRatio === 0) {
      stickyElement.classList.add("active");
      console.log(entries[0].intersectionRatio)
    }
    // fully intersects 
    else if (entries[0].intersectionRatio === 1){
      stickyElement.classList.remove("active");
      document.querySelector('.shadow').remove();
    console.log(entries[0].intersectionRatio)}
  });

  observer.observe(newDiv);
});

Демо

Есть ли лучшее решение для этого? Или как я могу это исправить?