https://sancti.nl/app/themes/sancti-theme-child/assets/js/templates/header/header.js?ver=1.2

1document.addEventListener('DOMContentLoaded', function () {
2  const mainBar = document.querySelector('.main-bar');
3  if (!mainBar) return;
4
5  const root = document.documentElement;
6
7  // offset waar sticky actief wordt (zoals jij al had)
8  let offsetTop = mainBar.offsetTop;
9
10  // Binnen dit bereik (px) gaan we van niet-verkleind -> volledig verkleind
11  // Start de shrink pas wanneer de header sticky is (netter).
12  const RANGE = 200;
13
14  function onScroll() {
15    const y = window.scrollY || window.pageYOffset || 0;
16
17    // Bestaande sticky logica behouden
18    if (y > offsetTop) {
19      mainBar.classList.add('fixed');
20    } else {
21      mainBar.classList.remove('fixed');
22    }
23
24    // Shrinkfactor 0..1, pas starten na sticky
25    const start = offsetTop;               // beginpunt shrink
26    let s = (y - start) / RANGE;
27    if (s < 0) s = 0;
28    if (s > 1) s = 1;
29
30    // Zet CSS variabele voor interpolatie in de CSS
31    root.style.setProperty('--shrink', s);
32  }
33
34  // Recompute offsetTop bij resize/DOM-veranderingen
35  function recompute() {
36    offsetTop = mainBar.offsetTop;
37    onScroll();
38  }
39
40  onScroll();
41  window.addEventListener('scroll', onScroll, { passive: true });
42  window.addEventListener('resize', recompute);
43});