Merge pull request #706 from pbln/new

Navbar fixed on top.
Tejashri-Taral · Oct 30, 2024 · 3b1f676 · 3b1f676
2 parents 794d37f + f4f089d
commit 3b1f676
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -662,35 +662,7 @@ <h2>Subscription Successful!</h2>
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 
     <!-- ProgressBar Functionality -->
-    <script>
-        window.onscroll = function () {
-            updateProgressBar();
-        };
-        function updateProgressBar() {
-            const windowScroll = document.body.scrollTop || document.documentElement.scrollTop;
-            const documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-            const scrollPercent = (windowScroll / documentHeight) * 100;
-            document.getElementById(" progress-bar ").style.width = scrollPercent + "%";
-        }
-
-    </script>
-    <!-- ProgressBar Functionality Ends-->
-    <script>
-        AOS.init();
-        let headerVisible = false;
-        document.getElementById("menu").addEventListener("click", function () {
-
-            if (headerVisible === false) {
-                document.getElementById("header").style.height = "280px";
-                headerVisible = true;
-            }
-            else {
-                document.getElementById("header").style.height = "50px";
-                headerVisible = false;
-            }
-
-        })
-    </script>
+    <script src="script/progressbar.js"></script>
 <script>
     gsap.from("#header", {
         duration: 1.5,

diff --git a/script/progressbar.js b/script/progressbar.js
@@ -1,7 +1,31 @@
-window.addEventListener('scroll', function() {
-            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-            const scrolled = (winScroll / height) * 100;
-            document.getElementById('progress-bar').style.width = scrolled + '%';
-});
+
+        window.onscroll = function() {
+    updateProgressBar();
+    toggleStickyNavbar();
+};
+
+function updateProgressBar() {
+    const windowScroll = document.body.scrollTop || document.documentElement.scrollTop;
+    const documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    const scrollPercent = (windowScroll / documentHeight) * 100;
+    const progressBar = document.getElementById("progress-bar");
+
+    if (progressBar) {
+        progressBar.style.width = scrollPercent + "%";
+    } else {
+        console.warn("Progress bar element not found.");
+    }
+}
+
+function toggleStickyNavbar() {
+    const navbar = document.getElementById("header");
+    const sticky = navbar.offsetTop;
+    console.log(sticky) 
+    console.log(window.pageYOffset)
+    if (window.pageYOffset >= 100) {
+        navbar.classList.add("sticky");
+    } else {
+        navbar.classList.remove("sticky");
+    }
+}
 
diff --git a/style.css b/style.css
@@ -115,12 +115,23 @@ html {
 .header {
   height: 70px;
   width: 100%;
-  /* background-color: red; */
   padding: 0px 2%;
   display: flex;
   justify-content: space-between;
 }
 
+.sticky{
+  height: 70px;
+  width: 100%;
+  padding: 0px 2%;
+  position: fixed;
+  top: 0px;
+  z-index: 1000;
+  background-color: rgb(248,247,247);
+  display: flex;
+  justify-content: space-between;
+}
+
 .logo {
   width: 12%;
   height: 70px;
@@ -1268,6 +1279,7 @@ main {
   position: relative;
   z-index: 10;
 }
+
 .slider {
   background: url(shoppingimage.jgp);
   margin: 12px;