嗨，我的朋友，还有另一个解决方案，使用useScrollTrigger

export default function BoxSx() {
  const parentRef = React.useRef(null);
  const [node, setNode] = React.useState(undefined);
  
  // showSticky is when you reach threshold
  const showSticky = useScrollTrigger({
    target: node,
    threshold: 100 // here you define the threshold to showSticky in true
  });

  // As refs starts with null we define this useEffect
  // and a state to update the current node when the component loads
  // we pass the node set in useEffect
  React.useEffect(() => {
    setNode(parentRef.current);
  }, []);
  
  // this console.log will show false or true related if the threshold was reached or not
  console.log(showSticky);

  return (
    <Box
      sx={{
        width: 400,
        height: 1000,
        overflow: 'auto',
        border: '1px solid #ccc',
        borderRadius: '4px',
      }}
      ref={parentRef}
    >
      <ul>
        {/* Generate a list of text items */}
        {Array.from({ length: 100 }, (_, index) => (
          <li key={index}>{`Text ${index + 1}`}</li>
        ))}
      </ul>
      <Box
        position="sticky"
        bottom={0}
        bgcolor="white"
        p={2}
        boxShadow={2}
        zIndex={100}
      >
        test
      </Box>
    </Box>
  );
}

希望有帮助

import * as React from 'react';
import Box from '@mui/material/Box';

export default function BoxSx() {
  const [hideSticky, setHideSticky] = React.useState(false);

  const handleScroll = (event) => {
    const target = event.target;
    if (target.scrollHeight - target.scrollTop === target.clientHeight) {
      setHideSticky(true);
    } else {
      setHideSticky(false);
    }
  };

  return (
    <Box
      sx={{
        width: 400,
        height: 300,
        overflow: 'auto',
        border: '1px solid #ccc',
        borderRadius: '4px',
      }}
      onScroll={handleScroll}
    >
      <ul>
        {Array.from({ length: 20 }, (_, index) => (
          <li key={index}>{`Text ${index + 1}`}</li>
        ))}
      </ul>
      {!hideSticky && (
        <Box
          position="sticky"
          bottom={0}
          bgcolor="white"
          p={2}
          boxShadow={2}
          zIndex={100}
        >
          Hide this Div when parent div scrolled down
        </Box>
      )}
    </Box>
  );
}

是一个解决方案..