Merge pull request #2844 from Sourabh782/scroll

Resolved Scroll indicator bug

index.html

@@ -1187,7 +1187,7 @@
 <!-- Your custom JavaScript -->
 <script src="script.js"></script>
   <div class="nav-wrapper">
-    <div class="progress-bar"></div>
+    <div class="progress-bar" id="progress-bar"></div>
   </div>
 
   <div class="socialmediaicons" style="z-index: 99;" >

scrollbar.css

@@ -1,11 +1,14 @@
 .nav-wrapper{
-  position: sticky;
+  position: fixed;
   top: 0;
-  background-color: var(--seashell);
-  z-index: 1;
+  background-color: transparent;
+  height: 5px;
+  width: 100%;
+  z-index: 1002;
 }
 .progress-bar{
   height: 5px;
   width: 0;
   background-color: red;
+  z-index: 1002;
 }

scrollbar.js

@@ -1,7 +1,20 @@
-let progressBar = document.querySelector(".progress-bar");
-let documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+// let progressBar = document.querySelector(".progress-bar");
+// let documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
 
-window.onscroll = function(){
-   let progress = (scrollY / documentHeight) * 100;
-   progressBar.style.width = progress + "%";
-}
+// window.onscroll = function(){
+//    let progress = Math.floor((scrollY / documentHeight) * 100);
+//    progressBar.style.width = progress + "%";
+// }
+
+
+window.addEventListener('scroll', moveScrollIndicator);
+
+const scrollIndicatorElt = document.getElementById('progress-bar');
+
+const maxHeight = window.document.body.scrollHeight - window.innerHeight;
+
+function moveScrollIndicator(e) {
+   const percentage = Math.floor(((window.scrollY) / maxHeight) * 100);
+
+   scrollIndicatorElt.style.width = percentage + '%';
+}