https://desangosse.com.br/site/views/_assets/js/pages/header/header.js?1=1

1document.addEventListener("DOMContentLoaded", function () {
2
3    const pathName = window.location.pathname.split('/').at(-1);
4
5    const isHome = (pathName === 'home' || pathName === '') ? true : false;
6
7    const header = document.querySelector(".header-site");
8    const displayMode = document.querySelector(".display-mode");
9    if (!header) return;
10
11    if (!isHome) {
12
13        const headerHeight = header.offsetHeight;
14        let isVisible = false;
15
16        // 🔥 CLONA HEADER
17        const headerClone = header.cloneNode(true);
18        headerClone.classList.add("header-clone");
19        function toggleDisplayMode(hide) {
20            document.querySelectorAll(".display-mode").forEach(el => {
21                el.classList.toggle("d-none", hide);
22            });
23        }
24        // 🔐 ACESSIBILIDADE INICIAL
25        headerClone.setAttribute("aria-hidden", "true");
26        headerClone.removeAttribute("role");
27
28        // -------------------------
29        // CORRIGE IDs E TRIGGERS BOOTSTRAP
30        // -------------------------
31
32        // Altera todos IDs
33        headerClone.querySelectorAll("[id]").forEach(el => {
34            el.id = el.id + "-clone";
35        });
36
37        // Ajusta data-bs-target
38        headerClone.querySelectorAll("[data-bs-target]").forEach(el => {
39            const target = el.getAttribute("data-bs-target");
40            if (target && target.startsWith("#")) {
41                el.setAttribute("data-bs-target", target + "-clone");
42            }
43        });
44
45        // Ajusta aria-controls
46        headerClone.querySelectorAll("[aria-controls]").forEach(el => {
47            const control = el.getAttribute("aria-controls");
48            if (control) {
49                el.setAttribute("aria-controls", control + "-clone");
50            }
51        });
52
53        document.body.appendChild(headerClone);
54        headerClone.querySelectorAll(".display-mode").forEach(el => {
55            el.classList.add("d-none");
56        });
57        // ---------------------------------
58        // ATIVA OFFCANVAS DO CLONE
59        // ---------------------------------
60
61        var cloneOffcanvas = document.getElementById('offcanvasMenuMobile-clone');
62
63        if (cloneOffcanvas) {
64
65            var bsOffcanvasClone = new bootstrap.Offcanvas(cloneOffcanvas);
66
67            var mlClone = cloneOffcanvas.querySelectorAll('.el');
68
69            var openBtnClone = document.getElementById("OpenMenu-clone");
70
71            if (openBtnClone) {
72                openBtnClone.addEventListener('click', function (e) {
73                    e.preventDefault();
74                    e.stopPropagation();

75                    bsOffcanvasClone.toggle();
76                });
77            }
78
79            if (mlClone.length > 0) {
80                mlClone.forEach(l => {
81                    if (l.getAttribute('href')?.includes('#')) {
82                        l.addEventListener('click', function () {
83                            bsOffcanvasClone.hide();
84                        });
85                    }
86                });
87            }
88        }
89
90        // ---------------------------------
91        // CONTROLE VISUAL DO CLONE
92        // ---------------------------------
93
94        function checkHeader() {
95
96            const scrollY = window.scrollY;
97        
98            // MOSTRA clone
99            if (scrollY >= headerHeight && !isVisible) {
100                isVisible = true;
101        
102                header.classList.add("z-0");
103        
104                // Esconde todos os .display-mode
105                toggleDisplayMode(true);
106        
107                header.setAttribute("aria-hidden", "true");
108                headerClone.removeAttribute("aria-hidden");
109        
110                headerClone.classList.add("fadeIn");
111                headerClone.classList.remove("fadeOut");
112                headerClone.classList.add("active");
113            }
114        
115            // ESCONDE clone
116            if (scrollY < headerHeight - 100 && isVisible) {
117                isVisible = false;
118        
119                header.classList.remove("z-0");
120        
121                // Mostra novamente todos os .display-mode
122                toggleDisplayMode(false);
123        
124                header.removeAttribute("aria-hidden");
125                headerClone.setAttribute("aria-hidden", "true");
126        
127                headerClone.classList.add("fadeOut");
128                headerClone.classList.remove("fadeIn");
129        
130                setTimeout(() => {
131                    headerClone.classList.remove("active");
132                }, 300);
133            }
134        }
135
136        window.addEventListener("scroll", checkHeader);
137
138    } else {
139
140        const headerTop = document.querySelector(".top-header");
141        let headerHeight = header.offsetHeight;
142        let isFixed = false;
143
144        if (header) {
145
146            function checkHeader() {
147
148                if (window.scrollY >= headerHeight && !isFixed) {
149                    isFixed = true;
150
151                    header.classList.remove("header-animate-out");
152
153                    if (displayMode) {
154                        displayMode.classList.add("d-none");
155                    }
156                    headerTop.classList.add("border-green-700");
157                    header.classList.add("header-site--fixed");
158                    header.classList.add("header-animate-in");
159                    header.classList.remove("bg-transparent");
160                    header.classList.add("bg-primary-900");
161                    header.classList.remove("fadeIn");
162                    header.classList.add("shadow-lg");
163                }
164
165                if (window.scrollY < headerHeight && isFixed) {
166                    isFixed = false;
167
168                    header.classList.remove("header-animate-in");
169                    header.classList.add("header-animate-out");
170                    
171
172                    header.classList.add("bg-transparent");
173                    header.classList.remove("bg-primary-900");
174
175                    headerTop.classList.remove("border-green-700");
176                    headerTop.classList.add("border-primary-1000");
177
178                    header.addEventListener("animationend", function handler() {
179                        if (displayMode) {
180                            displayMode.classList.remove("d-none");
181                        }
182                        header.classList.remove("header-site--fixed");
183                        header.classList.remove("header-animate-out");
184                        header.removeEventListener("animationend", handler);
185                        header.classList.add("fadeIn");
186                        header.classList.remove("shadow-lg");
187                    });
188                }
189            }
190
191            window.addEventListener("scroll", checkHeader);
192
193            window.addEventListener("resize", () => {
194                headerHeight = header.offsetHeight;
195            });
196        }
197    }
198
199});