Make share icons to appear on scroll

components/share-icons.tsx

@@ -5,6 +5,7 @@ import TwitterIcon from 'components/icons/twitter-square.svg';
 import RedditIcon from 'components/icons/reddit-square.svg';
 import { Icon } from '@chakra-ui/icons';
 import { getFacebookShareUrl, getHnShareUrl, getRedditShareUrl, getTwitterShareUrl } from '../lib/url';
+import { useEffect, useState } from 'react';
 
 type ShareIconProps = {
   text: string;
@@ -14,8 +15,23 @@ type ShareIconProps = {
 export function ShareIcons(props: ShareIconProps) {
   const { text, url } = props;
 
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => setOffset(window.scrollY);
+
+    window.removeEventListener('scroll', onScroll);
+    window.addEventListener('scroll', onScroll, { passive: true });
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  if (offset <= 100) {
+    return null;
+  }
+
   return (
-    <Box pos='absolute' left={'-15px'} top={'60px'} height='100%' display={['none', 'none', 'none', 'block']}>
+    <Box pos='absolute' left={'-15px'} top={'190px'} height='100%' display={['none', 'none', 'none', 'block']}>
       <Flex pos='sticky' top='100px' flexDir='column'>
         <Link target='_blank' color='gray.500' href={getTwitterShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={TwitterIcon} /></Link>
         <Link target='_blank' color='gray.500' href={getFacebookShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={FacebookIcon} /></Link>