animations investigations

assets/js/investigation.js

@@ -9,3 +9,98 @@ export function initSliderBeforeAfter(container = document){
     }
   });
 }
+
+
+export function navInvestigation(){
+  const nav = document.getElementById('nav-investigation');
+  if (!nav) return;
+
+  const items = nav.querySelectorAll('li');
+  const headerOffset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h-header')) || 0;
+
+  const sections = Array.from(items).map(li => {
+    const href = li.querySelector('a')?.getAttribute('href');
+    const target = href ? document.querySelector(href) : null;
+    return { li, target };
+  }).filter(s => s.target);
+
+  const update = () => {
+    const scrollY = window.scrollY + headerOffset;
+    let current = sections[0];
+
+    for (const section of sections) {
+      if (section.target.offsetTop <= scrollY) {
+        current = section;
+      }
+    }
+
+    items.forEach(li => li.classList.remove('is-selected'));
+    if (current) current.li.classList.add('is-selected');
+  };
+
+  window.addEventListener('scroll', update, { passive: true });
+  update();
+}
+
+
+
+
+export function progressBar(){
+  const bar = document.getElementById('progressBar');
+  if (!bar) return;
+
+  window.addEventListener('scroll', () => {
+    const scrollTop = window.scrollY;
+    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+    const progress = docHeight > 0 ? (scrollTop / docHeight) * 160 : 0;
+    bar.style.width = `${progress}%`;
+  }, { passive: true });
+}
+
+
+export function scrollBack(){
+  const bottomBar = document.getElementById('bottom-bar');
+  const navInvestigation = document.getElementById('nav-investigation');
+  const header = document.getElementById('site-header');
+
+  let lastY = window.scrollY;
+  let peakY = window.scrollY;
+  let visible = false;
+
+  const show = () => {
+    visible = true;
+    if (bottomBar) bottomBar.classList.add('is-visible');
+    if (navInvestigation && header) header.classList.add('has-nav-investigation');
+  };
+
+  const hide = () => {
+    visible = false;
+    if (bottomBar) bottomBar.classList.remove('is-visible');
+    if (navInvestigation && header) header.classList.remove('has-nav-investigation');
+  };
+
+  window.addEventListener('scroll', () => {
+    const currentY = window.scrollY;
+
+    // header : basé uniquement sur la position absolue
+    if (navInvestigation && header) {
+      header.classList.toggle('has-nav-investigation', currentY >= 160);
+    }
+
+    // bottom-bar : show au scroll bas > 280px, hide après 200px de scroll haut
+    if (currentY > lastY) {
+      peakY = currentY;
+      if (!visible && currentY > 280) {
+        visible = true;
+        if (bottomBar) bottomBar.classList.add('is-visible');
+      }
+    } else {
+      if (visible && peakY - currentY >= 200) {
+        visible = false;
+        if (bottomBar) bottomBar.classList.remove('is-visible');
+      }
+    }
+
+    lastY = currentY;
+  }, { passive: true });
+}