React结合Tailwind CSS实现滚动时动态切换sticky类的方案咨询

要实现这个需求，核心是通过React状态控制Tailwind类名的增减，结合滚动事件计算元素位置关系来切换状态。具体步骤如下：

1. 引入必要的React Hooks #

需要用到useState管理sticky状态、useRef获取DOM元素、useCallback优化滚动事件函数、useEffect处理初始状态计算：

import React, { useState, useRef, useCallback, useEffect } from "react";

2. 定义状态与DOM引用 #

• isSticky：控制Block-2是否保留sticky类，初始值为true
• scrollContainerRef：获取滚动容器的DOM节点，用于计算滚动位置
• block3Ref：获取#block3元素的DOM节点，用于计算它的位置信息

const App = () => {
  const [isSticky, setIsSticky] = useState(true);
  const scrollContainerRef = useRef(null);
  const block3Ref = useRef(null);

3. 编写滚动事件处理函数 #

在滚动事件中，通过计算滚动容器的滚动距离和#block3的位置，判断是否需要切换sticky状态：

const handleScroll = useCallback(() => {
    const container = scrollContainerRef.current;
    const block3 = block3Ref.current;

    if (!container || !block3) return;

    // 计算#block3的底部相对于滚动容器的位置
    const block3Bottom = block3.offsetTop + block3.clientHeight;
    // 获取滚动容器的滚动距离
    const scrollTop = container.scrollTop;

    // 当滚动距离超过#block3的底部位置时，移除sticky类；否则添加
    setIsSticky(scrollTop < block3Bottom);
  }, []);

4. 处理初始状态（可选） #

页面加载时如果已经处于滚动状态，需要手动触发一次滚动计算，确保状态正确：

useEffect(() => {
    handleScroll();
  }, [handleScroll]);

5. 绑定引用与动态类名 #

• 给滚动容器绑定ref，给#block3绑定ref
• 给Block-2动态拼接类名：当isSticky为true时保留sticky类，否则移除

return (
    <div
      ref={scrollContainerRef}
      onScroll={handleScroll}
      className="overflow-y-auto flex flex-wrap gap-4 h-screen border-solid border-4 border-indigo-600"
    >
      <div 
        className={`${isSticky ? 'sticky' : ''} bg-gray-500 top-0 z-30 h-[32rem] border-solid border-4 border-orange-600`}
      >
        Block-2
      </div>
      <div
        ref={block3Ref}
        id="block3"
        className="h-[22rem] border-solid border-4 border-green-600 "
      >
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
      </div>
      <div className="h-[32rem] grow border-solid border-4 border-gray-600 ">
        Block-3
      </div>
      <div>Last child</div>
    </div>
  );
};

export default App;

关键逻辑说明 #

• 位置计算：block3.offsetTop是#block3相对于滚动容器的顶部距离，加上自身高度得到它的底部位置。当滚动容器的scrollTop超过这个底部位置时，说明#block3已经完全滚出可视区域的顶部（即“滚动到#block3元素之后”），此时移除sticky类。
• 状态切换：通过isSticky状态动态控制Tailwind类名，符合React的状态驱动UI理念，避免直接操作DOM修改类名。
• 性能优化：用useCallback包裹滚动事件函数，避免每次组件渲染都创建新的函数实例；滚动事件的计算逻辑简单，不会造成性能瓶颈。

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