I've got an element stickied to the bottom of the viewport. I am trying to have it change text upon reaching its "destination", i.e. when it stops sticking.

I found a somewhat relevant solution elsewhere online, but I can't quite get it to work... It almost does the trick, but it only goes into effect once the element comes in contact with the top of the viewport. Whereas I want it to turn pink once it stops sticking, immediately when it touches the blue element.

I've looked around for about a week now and I still can't find a way to make this happen, nor have I had any success through pure trial and error...

Hopefully some of you wizards here know how I can achieve this.

Link to codepen: https://codepen.io/darkwing/pen/WNwVXKx

Please ignore that the element starts out pink below if you don't use the link above.

const el = document.querySelector(".myElement")
const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(el);

#parent { 
  height: 2000px; 
}

.filler {
  background-color: green;
  height: 500px;
}

.myElement {
  width: 300px;
  height: 200px;
  background-color: red;
    position: sticky;
    bottom: 0;
}

.otherElement {
  width: 300px;
  height: 200px;
  background-color: blue;
}

/* styles for when the header is in sticky mode */
.myElement.is-pinned {
  background-color: pink;
} 

<div id="parent">
  
  <div class="filler"></div>
  <div class="myElement"></div>
  
  <div class="otherElement"></div>
  
</div>