当滚动到特定id ReactJS时添加类

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

const [addClass, setAddClass] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    const element = document.getElementById('your-id'); // 替换为特定id的实际值
    const rect = element.getBoundingClientRect();
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (rect.top + scrollTop <= 0) {
      setAddClass(true);
    } else {
      setAddClass(false);
    }
  };

  window.addEventListener('scroll', handleScroll);

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

return (
  <div className={addClass ? 'your-class' : ''}>
    {/* 组件内容 */}
  </div>
);