javascript - 当定位到窗口顶部时，是否可以向元素添加类？

Question

我试过添加一个事件监听器，但它不起作用（codepen）。

我想在元素粘在顶部时添加一个类，并在另一个元素变得粘稠时删除该类。

所以就像在粘性时添加类并从前一个粘性元素中删除一样。

我不确定我在 HTML 中创建它的方式是否会使其不起作用？

如果可能的话有什么想法吗？

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>

标签： javascripthtmljquerycss