diff --git a/app/partials/ReadProgressBar.tsx b/app/partials/ReadProgressBar.tsx
index 5f51ba4..5396a29 100644
--- a/app/partials/ReadProgressBar.tsx
+++ b/app/partials/ReadProgressBar.tsx
@@ -8,16 +8,28 @@ export function ReadProgressBar() {
 	const [width, setWidth] = createSignal("0%");
 
 	const handleScroll = () => {
-		const scrollTop = window.scrollY;
-		const pageHeight = document.documentElement.scrollHeight;
-		const scrollHeight = articleContentElement.scrollHeight;
+		const articleHeight = articleContentElement.scrollHeight;
+		const articleTopPosition =
+			articleContentElement.getBoundingClientRect().top;
+		const windowHeight = window.innerHeight;
 
-		const gapWithBottom = pageHeight - scrollHeight;
-		const scrollableHeight = pageHeight - gapWithBottom;
+		// Calculer la hauteur visible de l'élément dans la fenêtre
+		const visibleHeight = Math.min(
+			articleHeight,
+			windowHeight + articleTopPosition,
+		);
 
-		const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);
+		// Calculer la position de défilement relative à l'élément
+		const elementScrollTop = -articleTopPosition;
 
-		setWidth(`${scrollPercentage}%`);
+		// Calculer le pourcentage de défilement relatif à l'élément
+		const percentage =
+			(elementScrollTop / (articleHeight - windowHeight)) * 100;
+
+		// Limiter le pourcentage entre 0 et 100
+		const clampedPercentage = Math.max(0, Math.min(100, percentage));
+
+		setWidth(`${clampedPercentage}%`);
 	};
 
 	createEffect(() => {
diff --git a/app/partials/TableOfContents.tsx b/app/partials/TableOfContents.tsx
index fd386e7..9f96e1c 100644
--- a/app/partials/TableOfContents.tsx
+++ b/app/partials/TableOfContents.tsx
@@ -21,7 +21,6 @@ export function TableOfContents() {
 				if (!section.hash) return null;
 
 				const el = document.getElementById(section.hash);
-				console.log(section.hash, el);
 				if (!el) return null;
 
 				const style = window.getComputedStyle(el);