Merge pull request #131 from srishti023/main

Scroll Bar and Progress Bar added
PriyaGhosal · Oct 7, 2024 · 98aaff0 · 98aaff0
2 parents 9a27d3b + b3f1ebc
commit 98aaff0
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -90,6 +90,19 @@ <h1 id="logo">BuddyTrail</h1>
         </button>
       </nav>
     </header>
+    <div id="progress-bar"></div>
+    <!-- funcioning of progress bar -->
+    <script>
+      window.addEventListener('scroll', function() {
+          // Calculate the scroll progress
+          const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+          const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+          const scrollPercent = (scrollTop / scrollHeight) * 100;
+
+          // Update the width of the progress bar
+          document.getElementById('progress-bar').style.width = scrollPercent + '%';
+      });
+  </script>
     <main>
       <section class="hero">
         <h2>Travel Beyond Limits</h2>

diff --git a/style.css b/style.css
@@ -28,7 +28,32 @@ body {
   display: none; /* Initially hidden */
   z-index: 1000; /* Ensure it appears above other content */
 }
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 16px; 
+}
+
+::-webkit-scrollbar-track {
+  background: #111; 
+  border-radius: 10px; 
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(45deg, #4caf50, #2196f3);
+  border-radius: 10px;
+  border: 2px solid #111;
+  box-shadow: 0 0 10px #4caf50, 0 0 20px #2196f3;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(45deg, #4caf50, #2196f3);
+  box-shadow: 0 0 15px #4caf50, 0 0 30px #2196f3;
+}
 
+::-webkit-scrollbar-thumb:active {
+  background: linear-gradient(45deg, #3e8e41, #1a73e8);
+  box-shadow: 0 0 20px #3e8e41, 0 0 40px #1a73e8;
+}
 .scroll-top-btn:hover {
   background-color: #2c445e;
 }
@@ -164,6 +189,23 @@ nav ul {
   font-size: 1.5em;
   color: white;
 }
+/* Progress Bar Styles */
+#progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 5px;
+  background: linear-gradient(90deg, #9c27b0, #ff9800);
+  width: 0;
+  z-index: 9999;
+  transition: width 0.1s;
+  box-shadow: 0 0 10px rgba(156, 39, 176, 0.8), 0 0 20px rgba(255, 152, 0, 0.8);
+}
+
+#progress-bar.full {
+  background: linear-gradient(90deg, #7b1fa2, #ff5722); /* Darker gradient when fully scrolled */
+  box-shadow: 0 0 15px rgba(123, 31, 162, 0.8), 0 0 30px rgba(255, 87, 34, 0.8); /* Darker glow effect */
+}
 
 /* Section Styles */
 .content-section {