响应式设计（RWD）：粘性定位容器激活时切换图片的问题排查

我懂你这个痛点！硬编码的滚动像素值在响应式场景里简直是噩梦——桌面端和移动端的粘性容器激活时机完全不一样，导致动画提前触发。咱们换个思路，不用监听全局的scrollY，而是用Intersection Observer API精准追踪粘性容器的激活状态，这样动画切换就能和粘性容器完美同步，不管什么设备都能正常工作。

核心思路 #

1. 给粘性容器添加一个占位元素，它的高度和粘性容器完全一致
2. 用Intersection Observer监听这个占位元素：当占位元素完全离开视口时，说明粘性容器已经开始固定（sticky状态激活）
3. 粘性容器激活后，计算相对于激活点的滚动偏移量，用这个相对值来触发动画，代替全局的固定像素阈值

修改后的完整代码 #

import "../css/stack.css";
import React, { useEffect, useState, useRef } from "react";
import css from "../pictures/css.png";
import react from "../pictures/react.png";
import js from "../pictures/js.png";
import ts from "../pictures/ts.png";

function Stack() {
  const [jsLogo, setJsLogo] = useState("first");
  const [reactLogo, setReactLogo] = useState("");
  const [tsLogo, setTsLogo] = useState("");
  const [cssLogo, setCssLogo] = useState("");
  
  // 占位元素ref，用于检测粘性容器激活状态
  const stickyPlaceholder = useRef(null);
  // 标记粘性容器是否激活
  const [isStickyActive, setIsStickyActive] = useState(false);
  // 粘性激活后的相对滚动偏移量
  const [stickyScrollOffset, setStickyScrollOffset] = useState(0);

  // 监听占位元素，判断粘性容器是否激活
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        // 当占位元素完全离开视口，说明粘性容器开始固定
        setIsStickyActive(!entry.isIntersecting);
      },
      { threshold: 0 } // 完全离开时触发
    );

    if (stickyPlaceholder.current) {
      observer.observe(stickyPlaceholder.current);
    }

    return () => {
      if (stickyPlaceholder.current) {
        observer.unobserve(stickyPlaceholder.current);
      }
    };
  }, []);

  // 粘性激活后，计算相对滚动偏移
  useEffect(() => {
    const handleScroll = () => {
      if (isStickyActive) {
        // 计算从粘性激活点开始的滚动距离
        const activationOffset = stickyPlaceholder.current.offsetTop;
        const relativeOffset = window.scrollY - activationOffset;
        setStickyScrollOffset(relativeOffset);
      } else {
        setStickyScrollOffset(0);
      }
    };

    if (isStickyActive) {
      window.addEventListener("scroll", handleScroll);
    } else {
      window.removeEventListener("scroll", handleScroll);
    }

    return () => window.removeEventListener("scroll", handleScroll);
  }, [isStickyActive]);

  // 根据相对偏移量触发动画
  useEffect(() => {
    if (!isStickyActive) {
      // 粘性未激活时重置所有动画状态
      setJsLogo("first");
      setReactLogo("");
      setTsLogo("");
      setCssLogo("");
      return;
    }

    const offset = stickyScrollOffset;

    // 按相对偏移量分阶段触发动画
    if (offset <= 300) {
      setJsLogo("fromRight");
      setReactLogo("");
    }
    if (offset > 300 && offset <= 600) {
      setJsLogo("goLeft");
      setReactLogo("fromBottom");
    }
    if (offset > 600 && offset <= 900) {
      setReactLogo("goTop");
      setTsLogo("fromRight");
    }
    if (offset > 900 && offset <= 1200) {
      setTsLogo("goLeft");
      setCssLogo("fromTop");
    }
    // 可以继续添加后续阶段的逻辑
  }, [isStickyActive, stickyScrollOffset]);

  return (
    <>
      {/* 占位元素：高度和粘性容器一致，用于检测激活状态 */}
      <div ref={stickyPlaceholder} className="sticky-placeholder"></div>
      
      <div className="sticky">
        <div id="Stack">
          <div
            className="divForH1"
            style={{
              position: "absolute",
              top: "0px",
              letterSpacing: "1px",
            }}
          >
            <h1 className="StackH1">Stack technologiczny</h1>
          </div>
          <img src={js} alt="JavaScript" className={`${jsLogo} sizePng`} />
          <img
            src={react}
            alt="React"
            className={`${reactLogo} second ${isStickyActive && stickyScrollOffset > 300 ? "first" : ""} sizePng`}
          />
          <img
            src={ts}
            alt="TypeScript"
            className={`${tsLogo} second ${isStickyActive && stickyScrollOffset > 600 ? "first" : ""} sizePng`}
          />
          <img
            src={css}
            alt="CSS"
            className={`${cssLogo} second ${isStickyActive && stickyScrollOffset > 900 ? "first" : ""} sizePng`}
          />
        </div>
      </div>
    </>
  );
}

export default Stack;

配套CSS调整 #

别忘了给占位元素添加样式，确保它和粘性容器高度一致：

/* 占位元素：高度和粘性容器相同 */
.sticky-placeholder {
  height: 100vh; /* 假设你的粘性容器高度是视口高度，根据实际情况调整 */
}

.sticky {
  position: sticky;
  top: 0;
  height: 100vh; /* 和占位元素高度保持一致 */
}

为什么这能解决问题？ #

• Intersection Observer 不受屏幕尺寸影响，能精准检测粘性容器何时开始固定，完全替代了不可靠的固定像素阈值
• 相对滚动偏移量 是从粘性激活点开始计算的，不管桌面还是移动端，动画触发的时机都和粘性容器的状态绑定，完美实现响应式同步
• 粘性未激活时自动重置状态，避免滚动回顶部时动画状态混乱

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