<!-- Code by Fedyaeva -->
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<style>
    /* Если нужно, чтобы блок уезжал под нижние удали нижнюю строку */
    /* Укажи тут ID блока */
    #rec485303940 {z-index: 100; position: relative;}
</style>
<script>
    gsap.registerPlugin(ScrollTrigger);
    
    // укажи ID фиксированного меню
    let menuID = '#rec485303849';
    
    let marker = 0;
    let menuHeight = document.querySelector(menuID).clientHeight;
    
    window.addEventListener("load", () => {
        // укажи свои значения marker и высоту меню для каждого разрешения
        if (window.matchMedia("(max-width: 480px)").matches) {
            marker = 300;
        } else if (window.matchMedia("(min-width: 480px) and (max-width: 640px)").matches) {
            marker = 400;
        } else if (window.matchMedia("(min-width: 640px) and (max-width: 960px)").matches) {
            marker = 500;
        } else if (window.matchMedia("(min-width: 960px) and (max-width: 1200px)").matches) {
            marker = 600;
        } else {
            marker = 800;
        }
        
        
        let tl = gsap.timeline({
            scrollTrigger: {
                trigger: '#rec485303940', // ID закрепляемого блока
                pin: true,
                start: `top top+=${menuHeight}`, // когда закреплять, можно указать center center или bottom bottom
                end: `+=${marker}+=${menuHeight}`,
                pinSpacing: false,
                scrub: 1,
                // расскомментируй строку ниже, если нужно посмотреть от куда до куда закрепляется блок
                // markers: {startColor: "green", endColor: "red", fontSize: "12px"}
            }
        });
        
        ScrollTrigger.refresh();
    });
</script>

<link rel="preconnect" src="https://unpkg.co/" crossorigin>