Added a fixed navigation bar and scroll progress bar. (#48)

Resolved #37 After Changes : https://github.com/user-attachments/assets/b2988f24-2959-496f-b4ac-9a5b27b3921b
GarimaSingh0109 · Oct 2, 2024 · 4575ca7 · 4575ca7
2 parents 4aa46db + 3243544
commit 4575ca7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">
 </head>
 <body>
+    <div id="progress-bar"></div>
     <header>
         <h1>Waste Management</h1>
         <nav>

diff --git a/script.js b/script.js
@@ -42,3 +42,17 @@ darkModeToggle.addEventListener('click', () => {
         localStorage.removeItem('dark-mode');
     }
 });
+
+
+window.onscroll = function() {
+  updateProgressBar();
+};
+
+function updateProgressBar() {
+  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+  var scrollPercent = (scrollTop / scrollHeight) * 100;
+
+  document.getElementById("progress-bar").style.width = scrollPercent + "%";
+}
+
diff --git a/styles.css b/styles.css
@@ -18,6 +18,11 @@ header {
     display: flex;
     text-align: center;
     justify-content: space-between;
+
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
 }
 
 nav {
@@ -361,6 +366,18 @@ footer.dark-mode {
 .feedback.dark-mode {
     background-color: #444; /* Dark feedback section */
 }
+
+
+#progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 5px;
+    background-color: #26a69a; 
+    z-index: 1001;
+}
+
 #newsletter-form button {
     background-color: #00796b; /* Teal color to match the theme */
     color: white;