Question 189701 in CSS Question posted in
Some basic documentation can be found here.

Css – How do I hide my Sticky Div in MUI5 when I reached the bottom of the parent div?

demo link:

https://stackblitz.com/edit/react-5xt9r5?file=demo.tsx

I want to hide a sticky div when I reached the buttom of a parent div while scrolling down.

this is a code example of how I set a parent div and the sticky div

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

I tried to do something with Material useScrollTrigger but I could not find a example where I can decide the parent target (what was actually working)

https://mui.com/material-ui/react-app-bar/#back-to-top

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
        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>
  );
}

    was a solution..


  2. 0

    Hi my friend there is another solution for this using the useScrollTrigger

    export default function BoxSx() {
  const parentRef = React.useRef(null);
  const [node, setNode] = React.useState(null);
  
  // showSticky is when you reach threshold
  const showSticky = useScrollTrigger({
    target: node ? node : undefined,
    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>
  );
}

    Hope it helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search