Update 'To The Top' button to become visible when scrolling

edvinlinden · Aug 29, 2022 · ed051db · ed051db
1 parent cfb274b
commit ed051db
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 38 deletions.
diff --git a/src/components/OverlayButtons/OverlayButtons.module.scss b/src/components/OverlayButtons/OverlayButtons.module.scss
@@ -43,11 +43,24 @@
 	font-weight: normal;
 	text-align: center;
 
+	animation: fadeIn ease 500ms;
+	animation-iteration-count: 1;
+	animation-fill-mode: forwards;
+
 	&:hover {
 		color: var(--title-color);
 	}
 
-	@media (max-width: $breakpoint-tablet) {
+	@media (max-width: 1199px) {
 		display: flex;
 	}
 }
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
diff --git a/src/components/OverlayButtons/OverlayButtons.tsx b/src/components/OverlayButtons/OverlayButtons.tsx
@@ -1,12 +1,18 @@
 import React from "react";
+import useScrollPosition from "@hooks/useScrollPosition";
 import styles from "./OverlayButtons.module.scss";
 
 const OverlayButtons = () => {
+	const scrollPosition = useScrollPosition();
+	const shouldShowToTopButton = scrollPosition > 400;
+
 	return (
 		<>
-			<a className={styles.toTheTop} href="#top" title="To the top">
-				To the top
-			</a>
+			{shouldShowToTopButton && (
+				<a className={styles.toTheTop} href="#top" title="To the top">
+					To the top
+				</a>
+			)}
 			<a
 				className={styles.aboutButton}
 				href="#about"

diff --git a/src/hooks/useScrollPosition.ts b/src/hooks/useScrollPosition.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+const useScrollPosition = () => {
+	const [scrollPosition, setScrollPosition] = useState(0);
+
+	useEffect(() => {
+		const updatePosition = () => {
+			setScrollPosition(window.pageYOffset);
+		};
+		window.addEventListener("scroll", updatePosition);
+		updatePosition();
+		return () => window.removeEventListener("scroll", updatePosition);
+	}, []);
+
+	return scrollPosition;
+};
+
+export default useScrollPosition;
diff --git a/src/layouts/page.astro b/src/layouts/page.astro
@@ -1,36 +1,45 @@
 ---
-  import '@assets/styles/global.scss';
-  import Footer from '@components/Footer/Footer';
-  import OverlayButtons from '@components/OverlayButtons/OverlayButtons';
-  const { title, description, url } = Astro.props;
-  const openGraphImage = "https://killedby.tech/images/og.png";
-  const disableTracking = import.meta.env.DEV;
+import "@assets/styles/global.scss";
+import Footer from "@components/Footer/Footer";
+import OverlayButtons from "@components/OverlayButtons/OverlayButtons";
+const { title, description, url } = Astro.props;
+const openGraphImage = "https://killedby.tech/images/og.png";
+const disableTracking = import.meta.env.DEV;
 ---
+
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width">
-    <meta name="description" content={ description }>
-    <meta property="og:url" content={ url }>
-    <meta property="og:type" content="website">
-    <meta property="og:title" content={ title }>
-    <meta property="og:description" content={ description }>
-    <meta property="og:image" content={ openGraphImage }>
-    <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content="killedby.tech">
-    <meta property="twitter:url" content={ url }>
-    <meta name="twitter:title" content={ title }>
-    <meta name="twitter:description" content={ description }>
-    <meta name="twitter:image" content={ openGraphImage }>
-    <link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
-    <title>{ title }</title>
-  </head>
-  <body>
-    <main>
-      <slot />
-    </main>
-    <Footer />
-    <OverlayButtons />
-    {disableTracking ? null : <script src="https://cdn.usefathom.com/script.js" data-site="SNZPDDNM" defer></script>}
-  </body>
-</html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="description" content={description} />
+		<meta property="og:url" content={url} />
+		<meta property="og:type" content="website" />
+		<meta property="og:title" content={title} />
+		<meta property="og:description" content={description} />
+		<meta property="og:image" content={openGraphImage} />
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta property="twitter:domain" content="killedby.tech" />
+		<meta property="twitter:url" content={url} />
+		<meta name="twitter:title" content={title} />
+		<meta name="twitter:description" content={description} />
+		<meta name="twitter:image" content={openGraphImage} />
+		<link rel="icon" href="/images/favicon.svg" type="image/svg+xml" />
+		<title>{title}</title>
+	</head>
+	<body>
+		<main>
+			<slot />
+		</main>
+		<Footer />
+		<OverlayButtons client:idle />
+		{
+			disableTracking ? null : (
+				<script
+					src="https://cdn.usefathom.com/script.js"
+					data-site="SNZPDDNM"
+					defer
+				/>
+			)
+		}
+	</body>
+</html>
diff --git a/tsconfig.json b/tsconfig.json
@@ -11,7 +11,8 @@
 			"@components/*": ["src/components/*"],
 			"@layouts/*": ["src/layouts/*"],
 			"@assets/*": ["src/assets/*"],
-			"@utils/*": ["src/utils/*"]
+			"@utils/*": ["src/utils/*"],
+			"@hooks/*": ["src/hooks/*"]
 		}
 	}
 }