{/* 签到部分 */} {/* 资源位 */} ...-Go服务器开发

在React中，可以使用useRef来获取对元素的引用，并通过getBoundingClientRect()方法获取元素的位置信息。以下是一个示例代码：

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

const ResourceArea = () => {
  const resourceRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const { top } = resourceRef.current.getBoundingClientRect();
      // 判断距离顶部多少px，执行相应逻辑
      if (top <= 100) {
        // 距离顶部小于等于100px时的逻辑
      } else {
        // 距离顶部大于100px时的逻辑
      }
    };

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

  return <div ref={resourceRef}>Resource Area</div>;
};

export default ResourceArea;

在上述代码中，我们通过useRef创建了一个名为resourceRef的引用，然后将其赋值给要观察滚动位置的元素。在useEffect钩子中，我们监听了窗口的滚动事件，并使用getBoundingClientRect()方法获取到元素与视口顶部之间的距离（即top属性）。根据这个距离可以进行相应的判断和处理。

请注意，在组件卸载时需要移除滚动事件监听器以避免内存泄漏。这里使用了空数组作为第二个参数，表示只在组件挂载和卸载时执行一次效果函数。

你可以根据自己的需求，调整判断距离顶部多少像素的条件，并在相应的位置添加逻辑。

内容由零声教学AI助手提供，问题来源于学员提问