javascript - 创建带有标题部分的粘性标题

Question

我正在尝试创建一个包含一些部分（每个页面都有标题）的网页，当用户滚动到某个部分时，标题会变得很粘。
所以something like this。

为此，我认为Intersection Observer API是正确的选择：


  Intersection Observer API使代码可以注册一个回调函数，该回调函数将在他们希望监视的元素进入或退出另一个元素（或视口）时，或者当两个相交的量改变请求的量时执行。这样，站点不再需要在主线程上执行任何操作来监视这种元素交集，并且浏览器可以自由地优化交集的管理。


我的测试代码的Here a codesandbox。
基本上，这些是我采取的步骤：


创建一个引用数组：每个标题div一个
创建一个状态来管理是否显示粘性标头和标头的内容（当前部分的标题）
创建一个IntersectionObserver实例，其中viewport作为父节点（root: null），每个divRef作为目标节点。


componentDidMount：

componentDidMount() {
  const options = {
    root: null as any,
    rootMargin: "-64px 0px 0px 0px",
    threshold: 1.0
  };
  this.observer = new IntersectionObserver(this.handleIntersect, options);
  this.chartsRef.forEach(divRef => this.observer.observe(divRef));
}

handleIntersect方法应使用新值设置状态。


如果打开Codesandbox，您会发现它无效：标题永远不会出现。为什么？有人能帮我吗？

Answer 1

rootMargin选项不允许将isIntersecting标志设置为true。
删除此选项，handleIntersect函数将按预期工作。
您可能希望为rootMargin提供一个更合适的值。