JavaScript 使用 Intersection Observer 判断 div 可见性并修改 header 类

你可以使用 JavaScript 的 Intersection Observer 来判断某个 div 是否可见，然后根据判断结果来修改包含 data-md-component='header' 属性的 div 的 class。

首先，你需要给要判断可见性的 div 添加一个 id，比如 targetDiv：

<div id='targetDiv'></div>

然后，你可以使用以下 JavaScript 代码来监听 targetDiv 的可见性变化：

// 创建一个新的 Intersection Observer 对象
const observer = new IntersectionObserver(entries => {
  // entries 是一个包含所有被观察元素的可见性信息的数组
  entries.forEach(entry => {
    // 判断被观察的元素是否可见
    if (entry.isIntersecting) {
      // 如果可见，则执行相应的操作，这里是修改包含 data-md-component='header' 属性的 div 的 class
      const headerDiv = document.querySelector('[data-md-component='header']');
      headerDiv.classList.add('new-class');
    } else {
      // 如果不可见，则执行相应的操作，这里是移除新添加的 class
      const headerDiv = document.querySelector('[data-md-component='header']');
      headerDiv.classList.remove('new-class');
    }
  });
});

// 开始观察 targetDiv 的可见性
const targetDiv = document.getElementById('targetDiv');
observer.observe(targetDiv);

上述代码创建了一个新的 Intersection Observer 对象，并使用 observe() 方法开始观察 targetDiv 的可见性。当 targetDiv 的可见性发生变化时，Intersection Observer 会调用回调函数，回调函数中根据可见性的变化来执行相应的操作。

在回调函数中，我们首先通过 document.querySelector('[data-md-component='header']') 获取包含 data-md-component='header' 属性的 div 元素，然后使用 classList 对象的 add() 方法和 remove() 方法来添加或移除新的 class。

你可以根据自己的需求修改相应的 class 名称和操作。