Add sticky header feature

2025-08-20 15:26:36 +02:00
parent 40ac91d294
commit b7a875c75e
3 changed files with 64 additions and 0 deletions
--- a/sticky-header/index.less
+++ b/sticky-header/index.less
@@ -0,0 +1,36 @@
+@media(min-width: 978px) {
+  .desktop-menu__scroll{
+    #container{
+      padding-top: 26.4rem; // Write here your header element height value
+    }
+
+    header{
+      position: fixed;
+      top: 0;
+      left: 0;
+      animation: stickyAnimation 0.5s;
+      .responsive-padding(); // Function with padding, added in the repository as well
+
+      &:before {
+        position: fixed;
+        top: 0;
+        left: 0;
+        animation: stickyAnimation 0.5s;
+        max-height: 100px;
+      }
+
+      .bars_top.bars, .breadcrumbs, .idm-help, .top-bar{
+        display: none !important;
+      }
+    }
+  }
+}
+
+@keyframes stickyAnimation {
+  0% {
+    transform: translate(0, -100%);
+  }
+  100% {
+      transform: translate(0, 0);
+  }
+}