banner on mobile

assets/js/mobile-sticky.js

@@ -0,0 +1,50 @@
+let isInitialized = false;
+
+export function btnSticky(responsiveSmall) {
+    if (isInitialized) return;
+
+    let main = document.querySelector("main");
+    if (!main || !main.classList.contains("page-enquete")) return;
+
+    let bannerPage = main.querySelector("#banner--page");
+    let sectionDl = document.querySelector("#section__dl");
+    let footer = document.querySelector("#site-footer");
+
+    if (!bannerPage || !sectionDl || !footer) return;
+
+    function checkScroll() {
+        const screenWidth = window.innerWidth;
+
+        // Vérifier que l'écran est plus petit que responsiveSmall
+        if (screenWidth >= responsiveSmall) {
+            bannerPage.classList.remove('is-visible');
+            bannerPage.style.transform = 'translateY(0)';
+            return;
+        }
+
+        const sectionTop = sectionDl.getBoundingClientRect().top;
+        const footerTop = footer.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
+
+        // Activer le banner quand #section__dl arrive en bas de l'écran
+        if (sectionTop <= windowHeight) {
+            bannerPage.classList.add('is-visible');
+
+            // Pousser le banner vers le haut si le footer arrive en bas de l'écran
+            if (footerTop < windowHeight) {
+                const pushUp = windowHeight - footerTop;
+                bannerPage.style.transform = `translateY(-${pushUp}px)`;
+            } else {
+                bannerPage.style.transform = 'translateY(0)';
+            }
+        } else {
+            bannerPage.classList.remove('is-visible');
+            bannerPage.style.transform = 'translateY(0)';
+        }
+    }
+
+    window.addEventListener('scroll', checkScroll);
+    checkScroll();
+
+    isInitialized = true;
+}

assets/js/onload.js

@@ -1,5 +1,9 @@
 import { headerToggle, headerScrollVisibility } from './header.js';
 import { copyLink } from './share.js';
+import { btnSticky } from './mobile-sticky.js';
+
+const responsiveMedium = 1080;
+const responsiveSmall = 768;
 
 // TEMP, with includeHTML() --------------------------------------
 
@@ -31,4 +35,20 @@ function initAfterLoad() {
   headerToggle();
   headerScrollVisibility();
   copyLink();
+  btnSticky(responsiveSmall);
+}
+
+function responsiveLoader() {
+  let isLoaded = false;
+
+  function checkResize() {
+    if (window.innerWidth < responsiveSmall && !isLoaded) {
+      
+      // other functions qui ne chargent que pour la version mobile ...
+      isLoaded = true;
+    }
+  }
+
+  checkResize();
+  window.addEventListener('resize', checkResize);
 }

assets/js/share.js

@@ -17,7 +17,3 @@ export function copyLink() {
     });
 }
 
-
-export function shareModal() {
-    let buttons = document.querySelectorAll('.btn__share');
-}