Merge pull request #53 from Genez-io/feat/blog

add navbar scroll
Genez-io · Jan 17, 2024 · f332cc0 · f332cc0
2 parents d9d834f + f6d676a
commit f332cc0
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 4 deletions.
diff --git a/resources/_gen/assets/scss/scss/index.scss_33d595602d9541840a342756df4891d9.content b/resources/_gen/assets/scss/scss/index.scss_33d595602d9541840a342756df4891d9.content
diff --git a/resources/_gen/assets/scss/scss/index.scss_33d595602d9541840a342756df4891d9.json b/resources/_gen/assets/scss/scss/index.scss_33d595602d9541840a342756df4891d9.json
@@ -1 +1 @@
-{"Target":"scss/index.6d2080b550cc05ce13432c8b9deaac36ea7af77f0c625ac52c7064fe702ff8bd.css","MediaType":"text/css","Data":{"Integrity":"sha256-bSCAtVDMBc4TQyyLneqsNup6938MYlrFLHBk/nAv+L0="}}
+{"Target":"scss/index.362fa1d8af095ff1850c9ae47075e624039cd06a946538b5b05c801636d38a32.css","MediaType":"text/css","Data":{"Integrity":"sha256-Ni+h2K8JX/GFDJrkcHXmJAOc0GqUZTi1sFyAFjbTijI="}}
diff --git a/themes/genezio-theme/assets/scss/navbar.scss b/themes/genezio-theme/assets/scss/navbar.scss
@@ -1,3 +1,13 @@
+.navbarEffect {
+  position: sticky !important;
+  top: 0;
+  background-color: #333;
+  color: #fff;
+  // padding: 10px;
+  transition: top 0.1s ease-in-out;
+  z-index: 1000;
+}
+
 @media (min-width: 992px) {
   nav {
     .navbar-collapse,

diff --git a/themes/genezio-theme/layouts/_default/baseof.html b/themes/genezio-theme/layouts/_default/baseof.html
@@ -35,4 +35,21 @@
     ></script>
     <!-- End of HubSpot Embed Code -->
   </body>
+
+  <script>
+    let lastScrollTop = 0;
+    const navbar = document.getElementById("navbar");
+
+    window.addEventListener("scroll", function () {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+      if (scrollTop > lastScrollTop && scrollTop > navbar.offsetHeight) {
+        navbar.style.top = `-${navbar.offsetHeight}px`;
+      } else {
+        navbar.style.top = "0";
+      }
+
+      lastScrollTop = scrollTop;
+    });
+  </script>
 </html>
diff --git a/themes/genezio-theme/layouts/partials/blogHeader.html b/themes/genezio-theme/layouts/partials/blogHeader.html
@@ -1,6 +1,7 @@
 <nav
+  id="navbar"
   style="border-bottom: 1px solid #e2d9f3; z-index: 99999; background-color: #f1ecf9"
-  class="navbar navbar-expand-lg p-0 px-3"
+  class="navbar navbarEffect navbar-expand-lg p-0 px-3"
 >
   <div
     class="container px-4 py-4"

diff --git a/themes/genezio-theme/layouts/partials/header.html b/themes/genezio-theme/layouts/partials/header.html
@@ -1,6 +1,7 @@
 <nav
+  id="navbar"
   style="border-bottom: 1px solid rgba(255, 255, 255, 0.1); z-index: 99999"
-  class="navbar navbar-expand-lg p-0 bg-dark px-3"
+  class="navbar navbarEffect navbar-expand-lg p-0 bg-dark px-3"
 >
   <div
     class="container px-4 py-4"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"Target":"scss/index.6d2080b550cc05ce13432c8b9deaac36ea7af77f0c625ac52c7064fe702ff8bd.css","MediaType":"text/css","Data":{"Integrity":"sha256-bSCAtVDMBc4TQyyLneqsNup6938MYlrFLHBk/nAv+L0="}}
		{"Target":"scss/index.362fa1d8af095ff1850c9ae47075e624039cd06a946538b5b05c801636d38a32.css","MediaType":"text/css","Data":{"Integrity":"sha256-Ni+h2K8JX/GFDJrkcHXmJAOc0GqUZTi1sFyAFjbTijI="}}