add dinamic footer margin

openpoke · Jun 10, 2024 · f2bb4d7 · f2bb4d7
1 parent 75aee27
commit f2bb4d7
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/decidim-core/app/packs/src/decidim/sticky_header.js b/decidim-core/app/packs/src/decidim/sticky_header.js
@@ -3,6 +3,13 @@
 // They increase the discoverability of the elements in the header.
 let prevScroll = window.scrollY;
 const stickyHeader = document.querySelector("[data-sticky-header]");
+const footer = document.querySelector("footer");
+const ctasButtons = document.querySelector(".layout-aside__ctas-buttons");
+
+const isElementInViewport = (element) => {
+  const rect = element.getBoundingClientRect();
+  return rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+};
 
 if (stickyHeader) {
   document.addEventListener("scroll", () => {
@@ -20,6 +27,14 @@ if (stickyHeader) {
         }
         prevScroll = currentScroll;
       }
+
+      if (ctasButtons) {
+        if (isElementInViewport(ctasButtons)) {
+          footer.style.marginBottom = `${ctasButtons.offsetHeight}px`;
+        } else {
+          footer.style.marginBottom = 0;
+        }
+      }
     }
   });
 };