configure sticky header

decidim-core/app/packs/src/decidim/index.js

@@ -48,6 +48,7 @@ import "src/decidim/gallery"
 import "src/decidim/direct_uploads/upload_field"
 import "src/decidim/data_consent"
 import "src/decidim/sw"
+import "src/decidim/sticky_header"
 
 // local deps that require initialization
 import formDatePicker from "src/decidim/datepicker/form_datepicker"

decidim-core/app/packs/src/decidim/sticky_header.js

@@ -0,0 +1,17 @@
+let prevScrollpos = window.scrollY;
+const mainBar = document.getElementById("main-bar");
+
+window.onscroll = function() {
+  // if a subelement is not visible it has no offsetParent
+  const header = document.getElementById("main-dropdown-summary-mobile").offsetParent;
+  if (header) {
+    let currentScrollPos = window.scrollY;
+
+    if (prevScrollpos > currentScrollPos) {
+      mainBar.style.top = 0;
+    } else {
+      mainBar.style.top = `-${header.offsetHeight}px`;
+    }
+    prevScrollpos = currentScrollPos;
+  }
+};

decidim-core/app/packs/stylesheets/decidim/_footer.scss

@@ -1,6 +1,4 @@
 footer {
-  @apply mb-16 lg:mb-0;
-
   .main-footer {
     @apply bg-gray-4;
 

decidim-core/app/packs/stylesheets/decidim/_header.scss

@@ -20,6 +20,16 @@ header {
     }
   }
 
+  #main-bar {
+    @apply fixed top-0 shadow-lg z-40 bg-white md:relative;
+
+    transition: top 0.3s;
+  }
+
+  #menu-bar {
+    @apply mt-24 md:mt-0;
+  }
+
   .main-bar {
     @apply container grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 items-center py-5 h-24;