Added scrollbar menu.html

khushi-joshi-05 · Jul 21, 2024 · 4c5b63c · 4c5b63c
1 parent 1d3d6b6
commit 4c5b63c
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/Html-files/menu.html b/Html-files/menu.html
@@ -38,9 +38,31 @@
     <link rel="stylesheet" href="../Css-files/navbar.css" />
     <link rel="stylesheet" href="../Css-files/footer.css" />
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <style>
+       #progressBar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0%;
+            height: 8px;
+            background-color: #e21f1f;
+            z-index: 9999;
+        }
+    </style>
   </head>
 
   <body>
+        <!-- Progress bar -->
+        <div id="progressBar"></div>
+        <script>
+            window.onscroll = function () {
+                var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+                var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+                var scrolled = (winScroll / height) * 100;
+                document.getElementById("progressBar").style.width = scrolled + "%";
+            };
+        </script>
+        <!-- end -->
 <nav class="navbar navbar-expand-lg fixed-top">
     <div class="container-fluid">
         <a href="index.html" class="navbar-brand opacity-75 flex-fill">