好的，我现在看到了添加的CSS的问题。我不完全理解为什么，但是对于“introduction”元素的花哨CSS，容器（<section>）要大得多。因此，将57%的容器放入视口需要更大的视口。
我不知道您到底想做什么，但是如果您从<section>中去掉“watch”类，然后创建一个具有更小阈值（可能是0.20）的新IntersectionObserver，并使用该观察器观察该部分（使用相同的回调），您就会明白我在说什么。
因此，从<section>中删除“watch”后，JavaScript将为：

// observer for each heading
let observer = new IntersectionObserver(callback, {
  threshold: 0.57
});
// apply
elements_to_watch.forEach((element) => {
  observer.observe(element);
});
// observer for section container
observer = new IntersectionObserver(callback, {
  threshold: 0.20
});
observer.observe(document.getElementById("section"));

我想我知道你想要实现什么。正如你所说的，你想要在每次Intersection observer通过页面的特定部分时删除.watch类。我通过删除.watch和添加.in-page来测试代码，反之亦然。
打开Google Chrome Elements，在你浏览指定的部分时观察DOM的变化，你会注意到拥有.watch类的特定部分的类发生了变化。
行部分不会改变，因为你并没有真正应用类.watch到它。你只是选择有类监视的DOM元素。我添加了类到每个元素，它工作正常。我希望能给予你一个提示。

// elements
let elements_to_watch = document.querySelectorAll('.watch');
// callback 
let callback = (items) => {
  console.log(items[0].target.id);
  items.forEach((item) => {
    if (item.isIntersecting) {
      console.log("... now in");
      item.target.classList.remove("watch");
      item.target.classList.add("in-page");
    } else {
      console.log("... now out");
      item.target.classList.add("watch");
      item.target.classList.remove("in-page");

    }
  });
}
// observer
let observer = new IntersectionObserver(callback, {
  threshold: 0.57
});
// apply
elements_to_watch.forEach((element) => {
  observer.observe(element);
});

<section class="introduction-section mb-5 watch" id=section>
  <div class="row wrapper h-100 watch" id=wrapper>
    <div class="col-12 px-0 introduction-title-container watch" id=introduction1>
      <h2 class="title watch">
        A SmartWatch is born that goes beyond all limits.
      </h2>
    </div>
    <div class="col-12 px-0 introduction-title-container watch" id=introduction2>
      <h2 class="title watch">For Athletes who challenge the impossible.</h2>
    </div>
    <div class="col-12 px-0 introduction-title-container watch" id=introduction3>
      <h2 class="title watch">The call to the Adventure begins.</h2>
    </div>
  </div>
</section>