https://steuerkoepfe.de/wp-content/custom_codes/940-js-body-closing.js

1/* ==============================================================
2   Navi color change with detection of bg color on scroll
3   ============================================================== */
4jQuery(function ($) {
5    const targetGroups = [
6        {
7            $items: $('.header-main-navi .elementor-item, .header-main-navi .elementor-menu-toggle'),
8            colorLight: '#000000',
9            colorDark: '#ffffff',
10            hoverLight: '#ffffff',
11            hoverDark: '#ffffff',
12            hoverWhite: '#ffffff'
13        },
14        {
15            $items: $('.header-main-menu-button .elementor-item'),
16            colorLight: '#ffffff',
17            colorDark: '#ffffff',
18            hoverLight: '#ffffff',
19            hoverDark: '#ffffff', // Updated: Hover state on dark backgrounds is now white
20            hoverWhite: '#171717'
21        }
22    ];
23
24    const $header = $('header, [data-elementor-type="header"]').first();
25
26    function applyColor($item, group) {
27        const isLight = $item.data('is-light-bg');
28        const isWhite = $item.data('is-white-bg');
29        const isHovered = $item.data('is-hovered');
30        
31        let targetColor;
32        if (isLight) {
33            if (isWhite && isHovered && group.hoverWhite) {
34                targetColor = group.hoverWhite;
35            } else {
36                targetColor = isHovered ? group.hoverLight : group.colorLight;
37            }
38        } else {
39            targetColor = isHovered ? group.hoverDark : group.colorDark;
40        }
41
42        if ($item.data('applied-color') !== targetColor) {
43            $item.css('color', targetColor);
44            $item.find('svg, path').css('fill', targetColor);
45            $item.data('applied-color', targetColor);
46        }
47    }
48
49    targetGroups.forEach(function(group) {
50        if (!group.$items.length) return;
51        
52        group.$items.on('mouseenter', function() {
53            $(this).data('is-hovered', true);
54            applyColor($(this), group);
55        }).on('mouseleave', function() {
56            $(this).data('is-hovered', false);
57            applyColor($(this), group);
58        });
59    });
60
61    function updateNavColor() {
62        targetGroups.forEach(function(group) {
63            if (!group.$items.length) return;
64
65            group.$items.each(function () {
66                const $item = $(this);
67                const rect = this.getBoundingClientRect();
68                
69                const x = rect.left + (rect.width / 2);
70                const y = rect.top + (rect.height / 2);
71                
72                const elementsUnderPoint = document.elementsFromPoint(x, y);
73                let detectedBgColor = 'rgba(0, 0, 0, 0)';
74
75                for (let i = 0; i < elementsUnderPoint.length; i++) {
76                    const el = elementsUnderPoint[i];
77
78                    if ($header.length && ($header[0] === el || $.contains($header[0], el))) {
79                        continue;
80                    }
81
82                    const computedStyle = window.getComputedStyle(el);
83                    const bg = computedStyle.backgroundColor;
84
85                    if (bg && bg !== 'transparent' && bg !== 'rgba(0, 0, 0, 0)') {
86                        const rgbaMatch = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
87                        if (rgbaMatch) {
88                            const alpha = rgbaMatch[4];
89                            if (alpha === undefined || parseFloat(alpha) > 0) {
90                                detectedBgColor = bg;
91                                break; 
92                            }
93                        }
94                    }
95                }
96
97                if (detectedBgColor === 'rgba(0, 0, 0, 0)' || detectedBgColor === 'transparent') {
98                    detectedBgColor = 'rgb(255, 255, 255)'; 
99                }
100
101                const rgbMatch = detectedBgColor.match(/\d+/g);
102                let isLight = true;
103                let isWhite = false;
104                
105                if (rgbMatch && rgbMatch.length >= 3) {
106                    const r = parseInt(rgbMatch[0], 10);
107                    const g = parseInt(rgbMatch[1], 10);
108                    const b = parseInt(rgbMatch[2], 10);
109                    
110                    const hsp = Math.sqrt(
111                        0.299 * (r * r) +
112                        0.587 * (g * g) +
113                        0.114 * (b * b)
114                    );
115                    
116                    isLight = hsp > 127.5;
117                    isWhite = r >= 240 && g >= 240 && b >= 240;
118                }
119
120                if ($item.data('is-light-bg') !== isLight || $item.data('is-white-bg') !== isWhite) {
121                    $item.data('is-light-bg', isLight);
122                    $item.data('is-white-bg', isWhite);
123                    applyColor($item, group);
124                }
125            });
126        });
127    }
128
129    let isScrolling = false;

130    $(window).on('scroll resize', function () {
131        if (!isScrolling) {
132            window.requestAnimationFrame(function () {
133                updateNavColor();
134                isScrolling = false;
135            });
136            isScrolling = true;
137        }
138    });
139
140    setTimeout(updateNavColor, 150);
141});