feat: add scroll progress bar

yongsk0066 · May 23, 2024 · 97c7beb · 97c7beb
1 parent e050de7
commit 97c7beb
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -27,6 +27,10 @@ const { Content } = await post.render();
 ---
 
 <PageLayout title={post.data.title} description={post.data.description ?? ""}>
+  <!--- Starts component --->
+  <div id="scroll-progress" class="bg-blue-600 h-1 fixed top-0 left-0 z-50">
+  </div>
+  <!--- Ends component --->
   <Container>
     <div class="animate">
       <BackToPrev href="/blog"> 돌아가기 </BackToPrev>
@@ -66,3 +70,15 @@ const { Content } = await post.render();
     </article>
   </Container>
 </PageLayout>
+<!--- Starts script --->
+<script type="module">
+  window.addEventListener("scroll", function () {
+    const scrollableHeight =
+      document.documentElement.scrollHeight - window.innerHeight;
+    const scrolled = window.scrollY;
+    const progressBar = document.getElementById("scroll-progress");
+    const progress = (scrolled / scrollableHeight) * 100;
+    progressBar.style.width = progress + "%";
+  });
+</script>
+<!--- Ends script --->