https://plieger.nl/_ui/responsive/common/js/header-scroll.js

1document.addEventListener('DOMContentLoaded', function () {
2  let lastScrollTop = 0;
3  const header = document.getElementById('header');
4
5  window.addEventListener('scroll', function () {
6    const stickyFilters = document.getElementsByClassName(
7      'c-product-overview-remove-filters--sticky',
8    )[0];
9
10    let scrollTop = window.scrollY || document.documentElement.scrollTop;
11
12    if (header && scrollTop <= 104) {
13      header.classList.remove('c-header--hide-header');
14    } else if (scrollTop > lastScrollTop) {
15      header.classList.remove('c-header--show-header');
16      header.classList.add('c-header--hide-header');
17    } else {
18      header.classList.remove('c-header--hide-header');
19      header.classList.add('c-header--show-header');
20      header.classList.add('c-header--sticky');
21    }
22
23    if (scrollTop <= 40) {
24      header.classList.remove('c-header--sticky');
25    }
26    
27    if (stickyFilters) {
28      if (header && header.classList.contains('c-header--hide-header')) {
29        stickyFilters.classList.add('c-product-overview-remove-filters--sticky-top');
30      } else {
31        stickyFilters.classList.remove('c-product-overview-remove-filters--sticky-top');
32      }
33    }
34    lastScrollTop = scrollTop;
35  });
36});