https://www.inpi.fr/themes/custom/inpi/theme/components/header/javascript/header.js?1790147087

1// media query breakpoint object
2import {breakpoint as MQ} from "../../../../../eolas_theme/eolas_base/assets/utils/media-queries.obj.js";
3
4// Select the header elements
5const header = document.querySelector('.c-main-header');
6const headerTop = document.querySelector('.c-header-top');
7const footer = document.querySelector('.c-footer');
8const adminToolbar = document.querySelector('#toolbar-administration');
9const adminToolbarSecondary = document.querySelector('.gin-secondary-toolbar');
10const rootStyles = document.querySelector(':root').style;
11var totalHeader = 0;
12
13if(adminToolbar) {
14  totalHeader += adminToolbar.offsetHeight;
15}
16
17if(adminToolbarSecondary) {
18  totalHeader += adminToolbarSecondary.offsetHeight;
19}
20
21// Variables to track the scroll position
22let lastScrollY = window.scrollY;
23
24// Responsive breakpoint
25const mediaQuery = window.matchMedia(`(min-width: ${MQ.breakpoint_small}px)`);
26
27// Function to check if the header is out of the viewport
28function checkHeader(e) {
29  if (header) {
30    if (window.scrollY > 0) {
31
32      var headerTopHeight = 0;
33
34      if(headerTop) {
35        headerTopHeight = headerTop.offsetHeight;
36      }
37
38      header.classList.add('sticky');
39      let headerHeight = (header.offsetHeight ) + headerTopHeight;
40      document.body.style.paddingTop = `${headerHeight}px`;
41    }
42
43    // Remove sticky class if scrollTop is 0
44    if (window.scrollY === 0) {
45      header.classList.remove('sticky');
46      document.body.style.paddingTop = '0px';
47    }
48
49    rootStyles.setProperty('--total-header-height', (header.offsetHeight + totalHeader) + 'px');
50  }
51}
52
53// Function to check the scroll direction and header position
54function checkScrollDirection() {
55  if (header) {
56    const currentScrollY = window.scrollY;
57
58    // Check if scrolling up
59    if (currentScrollY < lastScrollY && currentScrollY > header.offsetTop) {
60      document.body.classList.add('scrolling-up');
61    } else {
62      document.body.classList.remove('scrolling-up');
63    }
64
65    if (window.scrollY === 0) {
66      document.body.classList.remove('scrolling-up');
67    }
68
69    // Update the last scroll position
70    lastScrollY = currentScrollY;
71  }
72}
73
74// Function to check if page == tunnel
75function checkTunnel() {
76  if (header && footer) {
77    if (header.classList.contains("c-main-header--light")) {
78
79      //footer height
80      rootStyles.setProperty('--footer-height', (footer.offsetHeight) + 'px');
81    }
82  }
83}
84
85function updateHeight() {
86  document.documentElement.style.setProperty('--real-vh', `${window.innerHeight}px`);
87}
88
89// Add events listener to the window
90window.addEventListener('scroll', () => {
91  checkScrollDirection();
92  checkHeader(mediaQuery);
93});
94
95window.addEventListener('change', () => {
96  checkHeader(mediaQuery);
97  checkTunnel();
98});
99
100
101window.addEventListener('resize', updateHeight);
102
103// Initial check in case the page is loaded with scroll already past the header
104checkHeader(mediaQuery);
105checkTunnel();
106updateHeight(); // Run on page load