https://www.mittelhof.org/static/js/header.js

1const headerObserverOptions = {
2  rootMargin: '0px 0px 0px 0px',
3  threshold: 1
4}
5
6const body = document.querySelector('body');
7const header = document.querySelector('header');
8const headerNavs = document.querySelector('#header-navs');
9const topNavLogoLink = document.querySelector('#top-nav-logo-link');
10
11const scrollWatcher = document.querySelector('#scroll-watcher');
12
13const scaleHeader = (entries) => {
14    header.classList.toggle('shrinked-header', !entries[0].isIntersecting);
15    body.classList.toggle('shrinked-header', !entries[0].isIntersecting);
16    headerNavs.classList.toggle("shrinked-header", !entries[0].isIntersecting);
17    topNavLogoLink.classList.toggle("shrinked-header", !entries[0].isIntersecting);
18};
19
20const animate = _.throttle(scaleHeader, 400, {leading: true})
21const headerObserver = new IntersectionObserver(animate, headerObserverOptions);
22
23headerObserver.observe(scrollWatcher);