Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

Question

Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

Sample link to see the demonstration:

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

I am looking for a way to conceal a fixed div once I reach the bottom of its parent container while scrolling down.

Below is a snippet illustrating how I structured the parent and fixed div elements:

    <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 attempted to implement something using Material-UI's useScrollTrigger but I struggled to find an example where I could specify the target parent (which is what I actually needed).

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

javascript css reactjs typescript material-ui

Answer 1

Answer №1

Hey there! I wanted to share another solution with you that involves using the useScrollTrigger method.

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

  // As refs start as null, we use this useEffect hook to set the current node when the component loads
  React.useEffect(() => {
    setNode(parentRef.current);
  }, []);
  
  // This console.log will show whether the threshold was reached (true) or not (false)
  console.log(showSticky);

  return (
    <Box
      sx={{
        width: 400,
        height: 1000,
        overflow: 'auto',
        border: '1px solid #ccc',
        borderRadius: '4px',
      }}
      ref={parentRef}
    >
      <ul>
        {/* Generating 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>
  );
}

I hope this solution proves to be useful for you.

Answer 2

Hey there! I wanted to share another solution with you that involves using the useScrollTrigger method.

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

  // As refs start as null, we use this useEffect hook to set the current node when the component loads
  React.useEffect(() => {
    setNode(parentRef.current);
  }, []);
  
  // This console.log will show whether the threshold was reached (true) or not (false)
  console.log(showSticky);

  return (
    <Box
      sx={{
        width: 400,
        height: 1000,
        overflow: 'auto',
        border: '1px solid #ccc',
        borderRadius: '4px',
      }}
      ref={parentRef}
    >
      <ul>
        {/* Generating 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>
  );
}

I hope this solution proves to be useful for you.

Answer 3

Answer №2

    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 Box when the parent div is scrolled down
            </Box>
          )}
        </Box>
      );
    }

provided a useful solution for the issue at hand.

Answer 4

    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 Box when the parent div is scrolled down
            </Box>
          )}
        </Box>
      );
    }

provided a useful solution for the issue at hand.

Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

Answer №1

Answer №2

Similar questions

What is the method for activating the on collapse event with a bootstrap navbar?

What is the best way to create a continuous loop of images on a never-ending

Guide to transmitting and managing a JSON document utilizing JavaScript

Exploring Text Color Verification with CSS in Selenium IDE

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

Is there a way to include an image in a serialized file?

A guide on effectively mocking a Vuex store within the parentComponent of VueJS test-utils

The border-radius property in Bootstrap buttons causes unwanted white border artifacts to appear

Sass Alert: The mixin called roboto-family is missing from the stylesheet. Trace: Problem detected in src/pages/forms/forms.scss at

Attempting to deactivate expired cards

Why is it that a static variable cannot be accessed using the `this` keyword in a static method when the static method is called in any route's controller in NODEJS?

React safeguarding sensitive data in production builds

Node_modules folder is excluded from Typescript compilation

JavaScript to resize images before uploading without displaying a preview

Issue with React Routes only occurring in the production website

Creating a React Swiper that dynamically centers a sliding element of varying width

Building upon the preceding inquiry, a ReferenceError has occurred due to the object being undefined

Is it possible to apply identical css styles to multiple ids at once?

Utilize three.js to set the camera's position and rotation

What is the best way to display a unique modal on every tab?