react本机中的视差标题问题

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

const ParallaxTitle = ({ title }) => {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition(window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);

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

  const translateY = scrollPosition * 0.5; // 根据需要调整移动速度

  return (
    <h1 style={{ transform: `translateY(${translateY}px)` }}>{title}</h1>
  );
};

export default ParallaxTitle;

import React from 'react';
import ParallaxTitle from './ParallaxTitle';

const App = () => {
  return (
    <div>
      <h1>React Parallax Title Demo</h1>
      <ParallaxTitle title="Welcome to React Parallax Title" />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nunc vitae consectetur ultricies, nisl ligula ultrices nunc, at aliquet ligula diam id nibh.</p>
      {/* 其他内容 */}
    </div>
  );
};

export default App;