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提供一个更合适的值。

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

1 个答案: