React中如何在指定滚动高度显示元素并保持粘性定位？

代码不生效主要有4个核心问题，逐一修正即可：

• 属性API使用错误：window 对象不存在 screenY 属性，获取页面当前垂直滚动偏移量的正确属性是 window.scrollY，这是判断逻辑完全失效的核心原因
• 类名逻辑写反：需求是滚动高度超过阈值时显示粘性定位的菜单，当前代码中stickyPillMenu为true（滚动达标）时绑定的是绝对定位类absolute top-0，未达标时反而绑定粘性类，显示逻辑完全颠倒
• 事件监听未销毁：useEffect 中绑定的scroll事件没有在组件卸载时移除，会造成内存泄漏，甚至在组件销毁后持续触发setState报错
• 滚动事件无性能优化：scroll事件触发频率极高（每秒可达几十次），不加节流控制会频繁触发状态更新造成页面卡顿

修正后的逻辑代码 #

const [stickyPillMenu, setStickyPillMenu] = useState(false);

useEffect(() => {
  // 节流标记，避免频繁触发
  let throttleTimer = null;
  function handleStickyPillMenu () {
    if (throttleTimer) return;
    throttleTimer = setTimeout(() => {
      // 修正滚动距离属性，阈值300可根据需求调整
      setStickyPillMenu(window.scrollY >= 300);
      throttleTimer = null;
    }, 16) // 对应约60fps的触发间隔，平衡流畅度和性能
  }
  window.addEventListener("scroll", handleStickyPillMenu);
  // 组件卸载时移除监听，清理定时器
  return () => {
    window.removeEventListener("scroll", handleStickyPillMenu);
    clearTimeout(throttleTimer);
  }
}, [])

修正后的渲染代码 #

已调换类名判断逻辑，滚动达标时才启用sticky定位显示菜单：

return (
  <div>
      <div className={stickyPillMenu ? "flex sticky top-0 z-10 h-full" : "hidden"}>
        <div className="flex flex-col float-right ml-auto mt-1" style={{ marginRight: '6px' }}>
            <div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
                <img className="h-5 w-5" src="../img/icons/Language.png" alt="语言切换" />
            </div>
            <div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
                <a href="/login.html"> <img className="h-5 w-5" src="../img/icons/LoginRed.png" alt="登录入口" />
                </a>
            </div>
            <div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
                <a href="/made4me.html"> <img className="h-5 w-5" src="../img/icons/StarPointer.png" alt="专属推荐" />
                </a>
            </div>
            <div className="p-2 m-1 px-2 text-yagya-red-color bg-white border-2 rounded-full border-yagya-red-color">
                <img className="h-5 w-5" src="../img/icons/HeartRed.png" alt="收藏" />
            </div>
        </div>
    </div>
  </div>
)

补充说明：如果需要菜单未触发粘性时保留原有页面占位，可把未命中状态的hidden类替换为原本的absolute top-0类，按实际页面布局调整即可。

内容的提问来源于stack exchange，提问作者Divad