如何实现滚动到指定位置后导航栏固定（Sticky）效果

本文详解 react 中使用 css `position: sticky` 实现导航栏在滚动至 200px 后自动吸顶的完整方案，重点指出常见误区——遗漏 `top` 等偏移属性导致 sticky 失效，并提供可直接运行的修复代码与最佳实践。

要让导航栏在页面滚动至 200px 后“吸顶”并保持固定，核心在于正确结合 JavaScript 滚动监听与 CSS sticky 定位。你当前的逻辑（监听 scrollY > 200 并切换状态）本身是正确的，但问题出在样式层：position: sticky 是一个相对定位的增强模式，必须显式声明至少一个偏移方向（如 top、bottom），否则浏览器会将其视为普通 relative，无法触发粘性行为。

✅ 正确写法（关键修复）：

  
    

      {item.map((val, i) => (
        
{val.h1}
      ))}
    
  

⚠️ 注意事项：

• top-0 是必需项：它告诉浏览器“当元素顶部到达视口顶部时开始粘住”，缺省则 sticky 不生效；
• 添加 z-50 提升层级，避免被后续内容遮挡；
• 确保父容器未设置 overflow: hidden 或 transform 等会创建新层叠上下文/阻断 sticky 的 CSS 属性；
• useEffect 中的事件监听已正确清理，无需修改；
• 若导航栏初始不在视口顶部（如上方有 banner），建议用 getBoundingClientRect().top 替代 scrollY 判断更鲁棒，但本例中 scrollY > 200 完全适用。

? 进阶建议：
为提升性能，可将 handle 函数用 useCallback 包裹，并添加防抖（如 requestAnimationFrame 节流），避免高频触发重渲染：

const handle = useCallback(() => {
  requestAnimationFrame(() => {
    setStickyShow(window.scrollY > 200);
  });
}, []);

最终效果即如 Cohost 演示站所示：平滑吸顶、无跳动、响应迅速——关键不在 JS 逻辑，而在那行看似微小却决定成败的 top-0。