https://durach-allgaeu.de/typo3conf/ext/sd_sitepackage/Resources/Public/JavaScript/scrolling.js?1709730053

1/*
2    some Scroll functions to set CSS classes
3 */
4
5document.addEventListener('DOMContentLoaded', function() {
6
7
8    // elements to check:
9    const elementsInView = [].slice.call(document.querySelectorAll('.element-xyz'));
10    const elLeavesViewport = document.querySelector('#headerScrollTrigger');
11    const elReachesViewport = document.querySelector('#footer');
12
13
14    document.addEventListener('scroll', function () {
15
16        // check if elements are in view:
17        let i = 0;
18        while (elementsInView[i]) {
19            if ( isCompleteInViewport(elementsInView[i]) ) {
20                elementsInView[i].classList.add('complete-in-viewport');
21            } else {
22                elementsInView[i].classList.remove('complete-in-viewport');
23            }
24            i++;
25        }
26
27        // check if element leaves the viewport:
28        if (leavesViewport(elLeavesViewport)) {
29            elLeavesViewport.classList.add('leaves-viewport');
30        } else {
31            elLeavesViewport.classList.remove('leaves-viewport');
32        }
33
34        // check if element reaches the viewport:
35        if (reachesViewport(elReachesViewport)) {
36            elReachesViewport.classList.add('reaches-viewport');
37        } else {
38            elReachesViewport.classList.remove('reaches-viewport');
39        }
40
41    }, {
42        passive: true
43    });
44
45
46    function isCompleteInViewport(el) {
47        const rect = el.getBoundingClientRect();
48        return (
49            rect.top >= 0 &&
50            rect.left >= 0 &&
51            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
52            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
53        );
54    }
55
56    function leavesViewport(el) {
57        let viewportOffset = el.getBoundingClientRect();
58        let elementContainerOffsetTop = viewportOffset.top;
59        return (elementContainerOffsetTop * -1) >= el.offsetHeight;
60    }
61
62    function reachesViewport(el) {
63        let viewportHeight = document.documentElement.clientHeight;
64        let elementOffset = el.getBoundingClientRect();
65        let elementOffsetTop =  elementOffset.top;
66        return elementOffsetTop <= viewportHeight;
67    }
68});