https://syedbrothers.com.pk/js/new/common.js

1
2    document.addEventListener("DOMContentLoaded", function () {
3
4        const menu = document.getElementById("mainMenu");
5        const toggleBtn = document.querySelector(".navbar-toggler i");
6
7
8        menu.addEventListener("shown.bs.collapse", function(){
9
10            toggleBtn.classList.remove("fa-bars");
11            toggleBtn.classList.add("fa-xmark");
12
13        });
14
15
16        menu.addEventListener("hidden.bs.collapse", function(){
17
18            toggleBtn.classList.remove("fa-xmark");
19            toggleBtn.classList.add("fa-bars");
20
21        });
22
23
24        const targetSection = document.querySelector(".scroll-hide-section");
25
26        window.addEventListener("scroll", function () {
27            if (window.scrollY > 100) {
28                targetSection.classList.add("is-hidden");
29            } else {
30                targetSection.classList.remove("is-hidden");
31            }
32        });
33
34        const timelineWrapper = document.getElementById("timeline-wrapper");
35        const progressBar = document.getElementById("progress-bar");
36        const steps = document.querySelectorAll(".step");
37
38        const observerOptions = {
39            root: null,
40            rootMargin: "0px 0px -35% 0px",
41            threshold: 0.1
42        };
43
44        const stepObserver = new IntersectionObserver((entries) => {
45            entries.forEach(entry => {
46                if (entry.isIntersecting) {
47                    entry.target.classList.add("active");
48                } else {
49                    entry.target.classList.remove("active");
50                }
51            });
52
53            updateProgressBar();
54        }, observerOptions);
55
56        steps.forEach(step => stepObserver.observe(step));
57
58        // Function to calculate and update the pink progress bar height
59        function updateProgressBar() {
60            const activeSteps = document.querySelectorAll(".step.active");
61            if (activeSteps.length === 0) {
62                progressBar.style.height = "0px";
63                return;
64            }
65
66            const lastActiveStep = activeSteps[activeSteps.length - 1];
67            const timelineRect = timelineWrapper.getBoundingClientRect();
68            const lastStepDotRect = lastActiveStep.querySelector(".dot").getBoundingClientRect();
69
70            // Calculate height from the top of the timeline to the dot of the last active step
71            const height = lastStepDotRect.top - timelineRect.top + (lastStepDotRect.height / 2);
72            progressBar.style.height = `${height}px`;
73        }
74
75        // Recalculate on scroll and resize to ensure precision
76        window.addEventListener("scroll", updateProgressBar);
77        window.addEventListener("resize", updateProgressBar);
78
79        const mainHeader = document.getElementById('mainHeader');
80
81        function handleScroll() {
82            // Toggles class when scrolled more than 50px
83            if (window.scrollY > 50) {
84                mainHeader.classList.add('navbar-scrolled');
85            } else {
86                mainHeader.classList.remove('navbar-scrolled');
87            }
88        }
89
90        window.addEventListener('scroll', handleScroll);
91    });