如何让 React 导航栏在滚动到指定位置后实现真正的粘性固定效果

本文详解 react 中使用 css `position: sticky` 实现滚动粘性导航栏的常见误区与正确写法，重点指出 `top`（或其它定位值）是触发 sticky 的必要条件，并提供可立即运行的修复代码与最佳实践。

在 React 中实现“滚动至 200px 后导航栏吸顶”的效果时，仅通过 useState 控制 sticky 类名是不够的——CSS 的 position: sticky 本身是一个相对定位的增强行为，但它必须配合明确的偏移属性（如 top: 0）才能生效。W3Schools 和 MDN 均明确指出：若未声明 top、bottom、left 或 right 中的至少一个，sticky 将退化为普通 relative 行为，导致视觉上“不粘”。

你原代码中的问题正是此处：

虽然动态添加了 sticky 类，但该类在 Tailwind CSS 中默认只对应 position: -webkit-sticky; position: sticky;，缺少 top: 0（或其他定位值），因此浏览器无法确定粘性锚点，自然不会固定。

✅ 正确写法是将 top-0 与 sticky 同时应用（且需确保父容器具备正常文档流）：

  
    

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

          {val.h1}
        
      ))}
    
  

? 关键补充说明：

• top-0 是必需的：它定义了元素在粘住时距离视口顶部的距离；
• z-50 确保导航栏始终位于其他内容之上；
• transition-all duration-300 添加平滑入场动画，提升体验；
• 注意：sticky 依赖父容器高度和滚动上下文，确保其父元素未设置 overflow: hidden/clip，否则可能截断粘性行为；
• 更健壮的滚动监听建议添加防抖（debounce），避免高频触发影响性能（尤其在长页面中）。

? 小技巧：如需兼容旧版 Safari，可额外添加 -webkit-sticky（Tailwind 已内置，无需手动加）；若需支持 IE，则需降级为 position: fixed + 手动计算 top 值（但现代项目通常无需）。

至此，你的导航栏将在页面向下滚动超过 200px 后平滑吸顶，行为与 Cohost 演示站点完全一致。