带有 React Hooks 和 IntersectionObserver API 的粘性导航标头答案

【问题标题】：Sticky Nav Header with React Hooks and IntersectionObserver API带有 React Hooks 和 IntersectionObserver API 的粘性导航标头
【发布时间】：2021-10-13 02:29:09
【问题描述】：

基本上我的目标是将这个 StickyNav 实现转换为 ReactJS 并保持跨浏览器兼容性： https://codepen.io/smashingmag/pen/XWRXVXQ

我遇到的主要问题是找到使用反应钩子实现direction 和prevYPosition 变量的正确方法。我在 useEffect 挂钩中添加了 IntersectionObserver 和其余辅助方法的所有设置，并尝试使用 useState 存储方向和 prevYPosition 的值。但是当我将这些变量添加到 useEffect 依赖项时，它会导致组件多次重新渲染，并且原始逻辑根本不起作用。

所以，作为我的第一次实现尝试，我所做的是将direction 和prevYPosition 变量存储在实际的标头中（之前我通过useRef 引用了该节点）。但它并不能满足所有用例。当您向上和向下滚动时，它可以正常工作。但是，当您单击 Nav 上的链接元素试图从第 1 节跳到第 4 节时，它不会按预期工作。您可以在此处看到该实现： https://codesandbox.io/s/react-sticky-nav-i4e0y

如果有人可以就如何处理此实现以使其与 react js 一起正常工作，我将不胜感激。

非常感谢您！

【问题讨论】：

标签： reactjs react-hooks intersection-observer

【解决方案1】：

根据您的问题，我认为您在滚动时遇到了问题。所以使用 debounce 来解决这个问题。

一些去抖源是：

Lodash 去抖动 - https://lodash.com/docs/#debounce
使用去抖动挂钩 - https://usehooks.com/useDebounce/

【讨论】：

嘿 Ranganath MD，我认为这不是问题所在。如您所见，我现在添加了一个当前实现的示例：codesandbox.io/s/react-sticky-nav-i4e0y 使用 IntersectionObserver API 的好处是您实际上并没有监听每个滚动事件。相反，它仅在观察到的元素之一根据您提供的选项与视口相交时触发。