https://www.isere.fr/themes/custom/theme-eolas-base/eolas_base/assets/js/header.js?1790850393

1// media query breakpoint object
2import {breakpoint as MQ} from "../utils/media-queries.obj.js";
3
4// Select the header elements
5const header = document.querySelector('.c-main-header');
6const rootStyles = document.querySelector(':root').style;
7var headerHeight = header.offsetHeight;
8
9
10// Variables to track the scroll position
11let lastScrollY = window.scrollY;
12
13// Responsive breakpoint
14const mediaQuery = window.matchMedia(`(min-width: ${MQ.breakpoint_small}px)`);
15
16// Function to check if the header is out of the viewport
17function checkHeader(e) {
18    if (e.matches) {
19        if (window.scrollY > header.offsetHeight) {
20            header.classList.add('sticky');
21            document.body.style.paddingTop = `${header.offsetHeight}px`;
22            rootStyles.setProperty('--header-height', (header.offsetHeight) + 'px');
23        }
24
25        // Remove sticky class if scrollTop is 0
26        if (window.scrollY === 0) {
27            header.classList.remove('sticky');
28            document.body.style.paddingTop = '0px';
29            rootStyles.setProperty('--header-height', (headerHeight) + 'px');
30        }
31
32    }
33    else {
34        header.classList.remove('sticky');
35        document.body.style.paddingTop = '0px';
36
37        rootStyles.setProperty('--header-height', (header.offsetHeight) + 'px');
38    }
39
40}
41
42// Function to check the scroll direction and header position
43function checkScrollDirection() {
44    const currentScrollY = window.scrollY;
45
46    // Check if scrolling up
47    if (currentScrollY < lastScrollY && currentScrollY > header.offsetTop) {
48        document.body.classList.add('scrolling-up');
49    } else {
50        document.body.classList.remove('scrolling-up');
51    }
52
53    // Update the last scroll position
54    lastScrollY = currentScrollY;
55}
56
57// Add events listener to the window
58window.addEventListener('scroll', () => {
59    setTimeout(function() {
60        checkScrollDirection();
61        checkHeader(mediaQuery);
62    }, 200);
63
64});
65
66mediaQuery.addEventListener("change", checkHeader);
67
68// Initial check in case the page is loaded with scroll already past the header
69checkHeader(mediaQuery);