Is it possible to add a class to an element when positioned sticky to the top of the window?

Question

I've tried adding an event listener but it doesn't work (codepen).

I want to add a class when an element is stuck to the top and remove that class when another element becomes sticky.

So like add class when sticky and remove from the previous sticky element.

I'm not sure if the way I've created this in HTML might be making it not work or not?

Any ideas if possible?

document.addEventListener('sticky-change', e => {
    const header = e.detail.target;
    const sticking = e.detail.stuck;
    header.classList.toggle('shadow', sticking);

    document.querySelector('.header').textContent = header.textContent;
});

body {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #222;
}
.mainParent {
  height: 90%;
  width: 80%;
  background: rgba(222, 222, 222, 0.10);
  color: #ddd;
  overflow-y: scroll;
  border:4px solid #ddd;
}
.mainParent{margin:0.5em}
.header {
  position: sticky;
  padding: 0.5em;
  background: #ddd;
  color: #222;
  text-align: center;
}
#header01 {
  top: 0;
}
#header02 {
  top: 2em;
}
#header03 {
  top: 4em;
}
#header04 {
  top: 6em;
}
#header05 {
  top: 8em;
}
#header06 {
  top: 10em;
}
.content{text-align:center}

<div class="mainParent">
  <div class="header" id="header01">Header 01</div>
  <div id="content01" class="content">
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>Content 1-1<br><br>
    <div class="header" id="header02">Header 02</div>
    <div id="content02" class="content">
      <br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br>Content 1-2<br><br>
      <div class="header" id="header03">Header 03</div>
      <div id="content03" class="content">
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>Content 1-3<br><br>
        <div class="header" id="header04">Header 04</div>
        <div id="content04" class="content">
          <br><br><br><br><br><br><br><br><br><br><br><br>
          <br><br><br><br><br><br><br><br><br>Content 1-4<br><br>
          <div class="header" id="header05">Header 05</div>
          <div id="content05" class="content">
            <br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br>Content 1-5<br><br>
            <div class="header" id="header06">Header 06</div>
            <div id="content06" class="content">
              <br><br><br><br><br><br><br><br><br><br><br><br>
              <br><br><br><br><br><br><br><br><br>Peace &#128406;<br><br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>