On scroll effect based on the percentage of viewport height

onScroll

const [inView, setInView] = React.useState(false);

React.useEffect(() => {
  const handleScroll = () => {
    const scrollThresholdVH = 30;

    if (window.scrollY > (window.innerHeight * scrollThresholdVH) / 100) {
      setInView(true);
    } else {
      setInView(false);
    }
  };
  window.addEventListener("scroll", handleScroll);

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