ReactJS+Tailwind CSS实现标签栏触顶固定滚动效果

要实现标签栏向下滚动触顶后固定、向上滚动随页面复位的效果，你可以通过监听页面滚动事件，结合React状态管理动态切换Tailwind样式类来完成，以下是具体实现方案：

核心实现思路 #

• 监听页面滚动，计算标签栏距离页面顶部的初始偏移量
• 当滚动距离超过该偏移量时，给标签栏添加固定定位的样式
• 添加等高占位元素避免标签栏固定后下方内容突然上移

修改后的完整代码 #

import { useState, useEffect, useRef } from 'react';

const YourComponent = ({ caseInfo, navs }) => {
  const [nav, setNav] = useState('Tasks');
  const [isSticky, setIsSticky] = useState(false);
  const tabBarRef = useRef(null);
  
  useEffect(() => {
    const handleScroll = () => {
      if (tabBarRef.current) {
        const offsetTop = tabBarRef.current.offsetTop;
        setIsSticky(window.scrollY >= offsetTop);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="mt-7 w-full flex flex-col items-center border">
      {/* 标签栏容器：根据状态切换固定样式 */}
      <div
        ref={tabBarRef}
        className={`w-full ${isSticky ? 'fixed top-0 left-0 bg-white z-50 shadow-sm' : ''}`}
      >
        {/* 占位元素：标签栏固定时显示，抵消高度避免内容跳动 */}
        {isSticky && <div className="h-[38px]"></div>}
        <ul className="flex justify-center">
          {navs.map((element) => (
            <li
              key={element.id}
              className="border-r text-sm first:border-l"
            >
              <button
                onClick={() => setNav(element.name)}
                className={`px-6 py-2 ${
                  nav === element.name
                    ? 'text-green-400 bg-green-50 font-semibold border-b border-green-400'
                    : ''
                }`}
              >
                {element.name}
              </button>
            </li>
          ))}
        </ul>
      </div>
      {/* 标签内容区域 */}
      <div className="w-full">
        {nav === "Tasks" && <Tasks caseInfo={caseInfo} />}
        {nav === "Events" && <Events caseInfo={caseInfo} />}
        {nav === "Notes" && <Notes caseInfo={caseInfo} />}
      </div>
    </div>
  );
};

export default YourComponent;

关键细节说明 #

1. 滚动监听逻辑：用useRef获取标签栏DOM节点，在useEffect中绑定滚动事件，对比页面滚动距离和标签栏初始顶部偏移，更新固定状态。
2. 固定样式调整：固定时添加fixed top-0 left-0实现顶部固定，bg-white防止透明背景遮挡内容，z-50确保标签栏处于视觉层级最上层。
3. 占位元素适配：标签栏固定后会脱离文档流，添加的占位元素高度需和标签栏实际高度一致（示例中h-[38px]可根据实际需求调整）。
4. 布局一致性：给标签栏的ul添加justify-center，保持标签在页面居中的原有布局。

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