From 3b0f3630fdad35b576658c13145f5c22dbad31af Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Bajpai <saurabhkumarbajpaiai@gmail.com>
Date: Fri, 17 Jul 2026 00:01:01 +0530
Subject: [PATCH] fix: make navbar scroll progress reach page end

---
 src/App.tsx                       |  2 ++
 src/components/ScrollProgress.tsx | 12 ++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a3513d8d..c9b43e69 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import useAdaptiveBackgroundIntelligence from './hooks/useAdaptiveBackgroundInte
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
 import ScrollToTop from './components/ScrollToTop';
+import ScrollProgressBar from './components/ScrollProgress';
 import FloatingBottomBar from './components/FloatingBottomBar';
 import BackToTopButton from './components/BackToTop';
 import GlassyUILandingPage from './components/GlassyUILandingPage';
@@ -137,6 +138,7 @@ const App: React.FC = () => {
         />
         <Router>
           <ScrollToTop />
+          <ScrollProgressBar />
           <Header />
           <AiChatbot />
           <BackToTopButton />
diff --git a/src/components/ScrollProgress.tsx b/src/components/ScrollProgress.tsx
index 0d7b5b86..ba9a9cda 100644
--- a/src/components/ScrollProgress.tsx
+++ b/src/components/ScrollProgress.tsx
@@ -6,6 +6,7 @@ const ScrollProgressBar: React.FC = () => {
 
   useEffect(() => {
     let animationFrameId: number;
+    const scrollElement = document.scrollingElement ?? document.documentElement;
 
     const handleScroll = () => {
       if (animationFrameId) {
@@ -14,19 +15,21 @@ const ScrollProgressBar: React.FC = () => {
 
       animationFrameId = requestAnimationFrame(() => {
         const totalHeight =
-          document.documentElement.scrollHeight - window.innerHeight;
-        const scrolled = totalHeight > 0 ? window.scrollY / totalHeight : 0;
+          scrollElement.scrollHeight - scrollElement.clientHeight;
+        const scrollTop = scrollElement.scrollTop;
+        const rawProgress = totalHeight > 0 ? scrollTop / totalHeight : 0;
+        const scrolled = Math.min(1, Math.max(0, rawProgress));
         setScrollProgress(scrolled);
       });
     };
 
-    window.addEventListener('scroll', handleScroll, { passive: true });
+    scrollElement.addEventListener('scroll', handleScroll, { passive: true });
 
     // Initial calculation in case the page is already scrolled on load
     handleScroll();
 
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      scrollElement.removeEventListener('scroll', handleScroll);
       if (animationFrameId) {
         cancelAnimationFrame(animationFrameId);
       }
@@ -51,6 +54,7 @@ const ScrollProgressBar: React.FC = () => {
         transition: 'transform 0.1s ease-out',
         willChange: 'transform',
       }}
+      aria-hidden='true'
     />
   );
 };