بروزرسانی استایل یک کامپوننت هنگام اسکرول در React.js

برای تغییر استایل یک کامپوننت هنگام اسکرول، بهترین روش اینه که از رویداد scroll استفاده کنی و بر اساس موقعیت اسکرول، استایل کامپوننت رو به‌روزرسانی کنی. در اینجا یه راهکار ساده و موثر رو با هم بررسی می‌کنیم:

1. ابتدا یه state برای نگهداری وضعیت اسکرول ایجاد کن. این state به‌روزرسانی می‌شه و بر اساس اون می‌تونیم استایل کامپوننت رو تغییر بدیم.
2. از useEffect استفاده کن تا هر زمانی که صفحه اسکرول شد، تابعی رو اجرا کنه که موقعیت اسکرول رو بررسی کنه.
3. بر اساس موقعیت اسکرول (مثلاً اگه از یه حدی بیشتر شد)، state رو تغییر بده و اون رو به استایل کامپوننتت اعمال کن.

یه مثال ساده از این روش رو می‌تونی اینجا ببینی:

import React, { useState, useEffect } from 'react';
const ScrollComponent = () => {
  // Define a state to store scroll position
  const [isScrolled, setIsScrolled] = useState(false);
  useEffect(() => {
   const handleScroll = () => {
   const scrollPosition = window.scrollY;
// Check if the scroll position is greater than a threshold
   if (scrollPosition > 100) {
   setIsScrolled(true);
   } else {
   setIsScrolled(false);
   }
};
   // Add the scroll event listener
   window.addEventListener('scroll', handleScroll);
   // Cleanup the event listener on component unmount
  return () => {
   window.removeEventListener('scroll', handleScroll);
   };
  }, []);
  return (
   <div style={{
    backgroundColor: isScrolled ? 'blue' : 'transparent',
    transition: 'background-color 0.3s ease'
   }}>
     <h1>Scroll to Change Background</h1>
   </div>
);
};
export default ScrollComponent;