如何实现React组件滚动到页面顶部后固定不再向上移动

方案1：CSS原生sticky定位（最推荐） #

• 性能最优，无需监听滚动事件，所有主流现代浏览器都支持
• 代码示例：

/* 给需要吸顶的组件添加该类 */
.target-component {
  position: sticky;
  top: 16px; /* 按需调整数值，就是组件固定后距离顶部的预留边距 */
  z-index: 99; /* 避免被其他页面元素遮挡 */
}

• 注意事项：需要确保该组件的所有父级元素都没有设置overflow: hidden、overflow: auto、overflow: scroll属性，否则sticky定位会失效。

方案2：JS监听滚动实现（适配复杂自定义场景） #

如果需要额外逻辑控制（比如吸顶后同步触发其他交互），可以用React Hooks实现：

import { useState, useEffect, useRef, useCallback } from 'react';
// 节流函数优化滚动事件性能，也可以自行实现简单节流逻辑
import { throttle } from 'lodash';

const YourCustomComponent = () => {
  const [isFixed, setIsFixed] = useState(false);
  const compRef = useRef(null);
  // 记录组件原始高度，预留占位避免组件固定后页面高度突变跳动
  const [placeholderHeight, setPlaceholderHeight] = useState(0);

  const handleScroll = useCallback(throttle(() => {
    const scrollY = window.scrollY;
    const compOffsetTop = compRef.current?.offsetTop || 0;
    // 16为顶部预留边距，可按需调整数值
    if (scrollY >= compOffsetTop - 16) {
      setIsFixed(true);
    } else {
      setIsFixed(false);
    }
  }, 100), []);

  useEffect(() => {
    if (compRef.current) {
      setPlaceholderHeight(compRef.current.offsetHeight);
    }
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  return (
    <>
      {/* 占位元素，防止组件脱离文档流后页面出现突兀跳动 */}
      {isFixed && <div style={{ height: placeholderHeight }} />}
      <div
        ref={compRef}
        style={isFixed ? {
          position: 'fixed',
          top: '16px',
          left: 0,
          right: 0,
          zIndex: 99,
          /* 如果组件不是通栏布局，可手动设置宽度和原容器一致即可 */
        } : {}}
      >
        {/* 你的组件原有内容 */}
      </div>
    </>
  );
};

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