如何用React Hooks和IntersectionObserver实现跨浏览器兼容的Sticky Nav导航栏

核心状态存储优化 #

你遇到的多重重渲染问题根源是useState的特性：每次更新都会触发组件重渲染，而direction、prevYPosition属于滚动过程中需要持久化、但不需要触发UI更新的中间状态，直接使用useRef存储即可解决该问题：

• useRef的.current属性更新不会触发组件重渲染
• ref对象在组件全生命周期内保持引用稳定，不需要加入useEffect的依赖项，不会导致useEffect重复执行
• 比绑定在DOM节点上存储更可靠，不会出现DOM属性读取时序异常的问题

完整实现逻辑 #

import { useRef, useEffect } from 'react';

const StickyNav = () => {
  // 用useRef存储不需要触发重渲染的状态
  const prevYPosition = useRef(window.scrollY);
  const direction = useRef('up');
  const navRef = useRef(null);
  // 导航显隐阈值，可根据实际需求调整
  const SCROLL_THRESHOLD = 80;

  useEffect(() => {
    // 滚动处理逻辑
    const handleScroll = () => {
      const currentY = window.scrollY;
      // 先更新滚动方向
      direction.current = currentY > prevYPosition.current ? 'down' : 'up';

      // 处理导航显隐逻辑
      if (navRef.current) {
        if (direction.current === 'down' && currentY > SCROLL_THRESHOLD) {
          navRef.current.classList.add('sticky-nav--hide');
        } else {
          navRef.current.classList.remove('sticky-nav--hide');
        }
      }

      // 更新上一次滚动位置
      prevYPosition.current = currentY;
    };

    // 处理锚点跳转场景的异常
    const handleNavLinkClick = () => {
      // 等待跳转完成后更新滚动位置，避免大跨度滚动导致的方向判断错误
      requestAnimationFrame(() => {
        prevYPosition.current = window.scrollY;
        direction.current = 'up';
      });
    };

    // 绑定事件
    window.addEventListener('scroll', handleScroll, { passive: true });
    const navLinks = navRef.current?.querySelectorAll('a[href^="#"]') || [];
    navLinks.forEach(link => link.addEventListener('click', handleNavLinkClick));

    // 销毁时解绑事件
    return () => {
      window.removeEventListener('scroll', handleScroll);
      navLinks.forEach(link => link.removeEventListener('click', handleNavLinkClick));
    };
  }, []); // 依赖项为空，ref对象本身稳定不需要加入

  return (
    <nav ref={navRef} className="sticky-nav">
      {/* 导航内容 */}
    </nav>
  );
};

export default StickyNav;

跨浏览器兼容处理 #

• 若用到IntersectionObserver做章节监听，可引入intersection-observer polyfill覆盖IE11等低版本浏览器
• 滚动事件的passive参数可添加兼容判断，避免老版本浏览器抛出异常
• position: sticky兼容有问题的场景，可回退到position: fixed方案，配合动态修改top属性实现相同效果

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