Add sticky header feature

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

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);
+  }
+}

sticky-header/steacky-header.js

@@ -0,0 +1,20 @@
+const HEADER_POINT = 70;
+let lastScrollY = window.scrollY;
+
+window.addEventListener("scroll", () => {
+  if (app_shop.vars.view === 1 || app_shop.vars.view === 2) return;
+
+  const container = document.querySelector("#container");
+  if (container.classList.contains("projector_page")) return;
+
+  const bodyEl = document.querySelector("body");
+  const currentScroll = window.scrollY;
+
+  if (currentScroll < lastScrollY && currentScroll > HEADER_POINT) {
+    bodyEl.classList.add("desktop-menu__scroll");
+  } else {
+    bodyEl.classList.remove("desktop-menu__scroll");
+  }
+  
+  lastScrollY = currentScroll;
+});