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

assets/js/script.js

@@ -4,7 +4,7 @@ import { themeToggle } from './themeToggle.js';
 import { playVideo } from './hero-video.js';
 import { initDropdowns } from './dropdown.js';
 import { initSwipers } from './swipers.js';
-import { initSliderBeforeAfter } from './investigation.js';
+import { initSliderBeforeAfter, progressBar, scrollBack, navInvestigation } from './investigation.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -20,7 +20,11 @@ window.onload = async function () {
   initDropdowns(responsiveSmall);
   initSwipers();
 
+  progressBar();
+
   initSliderBeforeAfter();
+  scrollBack();   
+  navInvestigation();  
 
   var elem = document.querySelector('.grid-masonry');
   var msnry = null;