代碼實現

import { useEffect, useRef, useState } from 'react';const DynamicPositionTracker = () => {const [distance, setDistance] = useState(0);const divRef = useRef(null);useEffect(() => {const targetDiv = divRef.current;if (!targetDiv) return;// 計算距離函數const calculate = () => {// 獲取元素相對于視口的位置const rect = targetDiv.getBoundingClientRect();// 獲取頁面垂直滾動量const scrollTop = window.pageYOffset;setDistance(rect.top + scrollTop);};// 初始化計算calculate();// 監聽滾動和尺寸變化const resizeObserver = new ResizeObserver(calculate);resizeObserver.observe(targetDiv);window.addEventListener("scroll", calculate);// 清理監聽return () => {resizeObserver.disconnect();window.removeEventListener("scroll", calculate);};}, []);return (<div ref={divRef}>當前距離頂部: {distance}px</div>);
};