如何在react原生中实现多个可滚动粘性头部

import React, { useState, useEffect } from 'react';
import './styles.css';

const StickyHeaders = () => {
  const [isSticky, setIsSticky] = useState(false);
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const currentPosition = window.pageYOffset || document.documentElement.scrollTop;
      setScrollPosition(currentPosition);
    };

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

  useEffect(() => {
    setIsSticky(scrollPosition > 0);
  }, [scrollPosition]);

  return (
    <div>
      <header className={isSticky ? 'sticky-header' : 'normal-header'}>
        Header 1
      </header>
      <header className={isSticky ? 'sticky-header' : 'normal-header'}>
        Header 2
      </header>
      <header className={isSticky ? 'sticky-header' : 'normal-header'}>
        Header 3
      </header>
      {/* Rest of the content */}
    </div>
  );
};

export default StickyHeaders;

.sticky-header {
  position: fixed;
  top: 0;
  background-color: #fff;
  width: 100%;
  z-index: 999;
  /* Add more styles as needed */
}

.normal-header {
  /* Add styles for non-sticky header */
}