create-rivas-react/components/styled-components/typescript/hooks/useScrollPosition.ts

Boilerplate for create react with atomic design

import { useEffect, useMemo, useState } from 'react';

const useScrollPosition = () => {
  const [scrollPosition, setScrollPosition] = useState(
    (typeof window !== 'undefined' && window.pageYOffset) || 0,
  );

  const onScroll = () => {
    requestAnimationFrame(() => {
      setScrollPosition(window.pageYOffset);
    });
  };

  useEffect(() => {
    window.addEventListener('scroll', onScroll.bind(this));
    return () => {
      window.removeEventListener('scroll', onScroll.bind(this));
    };
  }, []);

  const detached = useMemo(() => {
    return scrollPosition > 60;
  }, [scrollPosition]);

  return {
    detached,
  };
};

export default useScrollPosition;