How can I make an embedded HTML element behave as sticky between two specific sections in Wix velo?

How can I make an embedded HTML element behave as sticky between two specific sections in Wix?

Wix Studio Editor and Velo by Wix

I want an embedded HTML element to behave in the following way:

It should remain sticky between Section 1 and Section 2.
When scrolling to Section 2, the element should stick to a specific position (Point B).
As I scroll further to Section 3, it should remain at the same position in Section 2.
When scrolling back from Section 2 to Section 1, the element should move back to its original position (Point A).
In short, the HTML element should only act sticky between Section 1 and Section 2, and move as described when scrolling up or down.

I’ve tried several methods to achieve this, including:

Creating anchor points and manipulating the element using Velo by Wix.
Making the element sticky directly through Wix Studio.
Adjusting its position programmatically using the wix-window API.
However, none of these methods have worked to produce the desired behavior.

I was trying this method (the code below), but I am always having issues.
I tried sending the element position directly with postMessage, but I keep encountering problems.
Do you think I need to change the method, maybe by using Intersection Observer in Wix?

import wixWindowFrontend from 'wix-window-frontend';

$w.onReady(function () {
    trackScroll();
});

function trackScroll() {
    wixWindowFrontend.getBoundingRect()
        .then((windowSizeInfo) => {
            const scrollY = windowSizeInfo.scroll.y;
            const pointA = { top: 500, left: 100 }; 
            const pointB = { top: 800, left: 200 }; 
            const scrollRange = 300; 
            const htmlComponent = $w('#html1'); 

            let currentTop = 0;
            let currentLeft = 0;

            if (scrollY >= pointA.top && scrollY <= pointB.top) {
                const offset = (scrollY - pointA.top) / scrollRange;
                currentTop = pointA.top + (offset * (pointB.top - pointA.top));
                currentLeft = pointA.left + (offset * (pointB.left - pointA.left));

                htmlComponent.postMessage({
                    type: 'updatePosition',
                    style: {
                        top: `${currentTop}px`,
                        left: `${currentLeft}px`
                    },
                    additionalData: {
                        isVisible: true
                    }
                });
            } else if (scrollY > pointB.top) {
                currentTop = pointB.top;
                currentLeft = pointB.left;

                htmlComponent.postMessage({
                    type: 'updatePosition',
                    style: {
                        top: `${currentTop}px`,  
                        left: `${currentLeft}px`,
                    },
                    additionalData: {
                        isVisible: true
                    }
                });
            } else {
                htmlComponent.postMessage({
                    type: 'resetPosition',
                    style: {
                        top: '',
                        left: ''
                    },
                    additionalData: {
                        isVisible: false 
                    }
                });
            }

            setTimeout(trackScroll, 100);
        });
}

Additional information:
The element in question is an embedded HTML element. The scrolling behavior needs to be responsive and consistent across all devices. If anyone has a solution or best practices for achieving this, I’d appreciate your guidance!