Unstick pink container from green on contact

<style>
.container1 {
  width: 500px;
  height: 400px;
  background-color: lightblue;
  text-align: center;
  margin: 0px auto;
  position: sticky;
  top: 0;
  z-index: -1;
}

.container2 {
  width: 300px;
  height: 200px;
  background-color: lightgreen;
  text-align: center;
  margin: 0px auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

.container3 {
  width: 500px;
  height: 400px;
  background-color: pink;
  text-align: center;
  margin: 20px auto;
}
</style>
<div class="container1">
  <div class="container2">
  </div>
</div>
<div class="container3">
</div

<script>
  const pink = document.querySelector(".container3");
const green = document.querySelector(".container2");

function checkCollision() {
  const greenRect = green.getBoundingClientRect();
  const pinkRect = pink.getBoundingClientRect();

  if (pinkRect.bottom >= greenRect.bottom) {
    pink.style.position = "relative";
  } else {
    pink.style.position = "sticky";
  }
}

window.addEventListener("scroll", checkCollision);
  </script>