Merge pull request #45 from rockoder/fix-reading-progress-start-9015881955667487806

Fix reading progress bar initial value

Author: rockoder

src/components/ReadingProgress.astro

@@ -10,15 +10,25 @@
 
   if (progressBar && article) {
     const updateProgress = () => {
-      const articleTop = article.offsetTop;
-      const articleHeight = article.offsetHeight;
+      const rect = article.getBoundingClientRect();
+      const articleTop = rect.top + window.scrollY;
+      const articleHeight = rect.height;
       const windowHeight = window.innerHeight;
       const scrollY = window.scrollY;
 
-      // Calculate progress within the article
-      const scrollableDistance = articleHeight - windowHeight + articleTop;
-      const scrolled = Math.max(0, scrollY - articleTop + windowHeight);
-      const progress = Math.min(100, (scrolled / scrollableDistance) * 100);
+      // Calculate the total scrollable distance from the top of the page
+      // to the point where the bottom of the article reaches the bottom of the viewport.
+      const scrollRange = articleTop + articleHeight - windowHeight;
+
+      let progress = 0;
+      if (scrollRange > 0) {
+        // Start at 0% when the page is at the top (scrollY = 0)
+        // and reach 100% at the end of the article.
+        progress = Math.max(0, Math.min(100, (scrollY / scrollRange) * 100));
+      } else {
+        // If the article is already fully visible, progress is 100%.
+        progress = 100;
+      }
 
       progressBar.style.width = `${progress}%`;
     };