Javascript 使用固定高度闪烁的交叉点观测者的粘性导航

我正在使用intersection observer API实现一个粘性导航。当header元素不相交时，将添加sticky类。然而，当我滚动到标题的末尾和下一部分时，就在该阈值处，粘性类每秒重复添加和删除几十次，导致剧烈的闪烁。它只发生在我有一个声明的高度（100vh）时，但当我将高度更改为“自动”时，它不会闪烁。为什么会这样

HTML:

---

请提供html。

<header>
  <nav class="navigation">
      <a href="#"><img src="img/logo@2x.png" alt="ActiveBox logo" class="logo" /></a>
      <ul class="main-nav nav__links">
        <li><a href="#section--1" class="nav__link">Features</a></li>
        <li><a href="#section--2" class="nav__link">Works</a></li>
        <li><a href="#section--3" class="nav__link">Our Team</a></li>
        <li><a href="#section--4" class="nav__link">Testimonials</a></li>
        <li><a href="#section--5" class="nav__link">Download</a></li>
      </ul>
  </nav>

  <div class="hero-text-box">
    <h1>Your Favorite One Page Multi Purpose Template</h1>
    <h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et.
    </h2>
    <a class="btn-full" href="#">Find Out More</a>
  </div>
</header>

const nav = document.querySelector("nav");
const header = document.querySelector("header");

const navHeight = nav.getBoundingClientRect().height;

const observerCallback = function (entries, observer) {
  const [entry] = entries;
  if (!entry.isIntersecting) nav.classList.add("isSticky");
  if (entry.isIntersecting) nav.classList.remove("isSticky");
};

const observerOptions = {
  root: null,
  threshold: 0.1,
  rootMargin: `-${navHeight}px`,
};

const headerObserver = new IntersectionObserver(
  observerCallback,
  observerOptions
);
headerObserver.observe(header);