Iframe - Sticky button inside iframe at the bottom of viewport

Question

I am trying to place a sticky button inside iframe at the bottom of viewport, which means, when the scroll event occurs in the parent document, the sticky button inside iframe should adjust its position to be at the bottom of the viewport.

Steps followed:

1. Sent the scroll position of parent document to iframe using 'window.postMessage()..'
2. Received the parent scroll position in iframe and made some minor calculations to get the position of the sticky button and then set position:fixed and top: << calculated position >> on the element
3. Used requestAnimationFrame to update the style changes on the sticky button

After these three steps, the sticky button appears properly at the bottom of viewport and on scroll as well.

Issue: Every time when scroll happens in the parent document, I see the sticky button jumps(lags) before it settle down in correct position.

Even after using requestAnimationFrame, I am see the lag on the button movement.

Could you please help to resolve this laggy css animation?

Here is the code snippet

   const getStickyButtonPosition= () => {
    ParentContainer.getScrollData();
    requestAnimationFrame(getStickyButtonPosition);

   //Update element with the calculated position
    element.style.top = `${topPosition}px`;
  };

Since we are updating the element position in JS way, I believe the flickering is happening and the sticky animation is not smooth.

Please share suggestions and Thanks for the help!