прилипающий блок

прилипающий блок

    gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin);
    
    // Sticky menu
    function stickyMenuFunc() {
        const sidebarElement = document.querySelector('.list-anchor');
        const sectionSidebar = '.section__sidebar';
        if (sidebarElement) {
            gsap.to(sidebarElement, {
                scrollTrigger: {
                    trigger: sidebarElement,
                    start: 'top 30px',
                    endTrigger: sectionSidebar,
                    pin: true,
                    pinSpacing: true,
                    markers: false,
                    invalidateOnRefresh: true,
                },
            });
        }
    }

    stickyMenuFunc();
    
        function scrollspy() {
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                const id = entry.target.getAttribute('id');
                const cssClass1 = 'active';
                if (entry.intersectionRatio > 0) {
                    document.querySelector(`.list-anchor__link[href="#${id}"]`).parentElement.classList.add(cssClass1);
                } else {
                    document.querySelector(`.list-anchor__link[href="#${id}"]`).parentElement.classList.remove(cssClass1);
                }
            });
        });
        const sectionId = document.querySelectorAll('section[id]');
        const anchorLink = document.querySelectorAll('.list-anchor__link');
        const header = document.querySelector('.header');
        const cssClass2 = 'out--legal';
        sectionId?.forEach((section) => {
            observer.observe(section);
        });
        anchorLink?.forEach((link) => {
            link.addEventListener('click', () => {
                header.classList.add(cssClass2);
            });
        });
    }

    scrollspy()
    
        // ScrollTo anchor link
    function scrollToAnchorLinkFunc() {
        const arrAnchorLink = gsap.utils.toArray('.list-anchor__link');
        const body = 'body';
        if (arrAnchorLink) {
            arrAnchorLink.forEach(el => {
                let linkTo = document.querySelector(el.getAttribute('href')),
                    st = ScrollTrigger.create({trigger: linkTo, start: 'top 30px'});
                el.addEventListener('click', event => {
                    event.preventDefault();
                    gsap.set(body, {overflowY: 'auto'});
                    gsap.to(window, {scrollTo: st.start, overwrite: 'auto'});
                });
            });
        }
    }

    scrollToAnchorLinkFunc();