Is there anyway to move position:fixed elements, relative to another element on scroll?

  css, html, javascript

I am trying to move a popup (position:fixed), relative to another div (say RDIV) on its parents scroll.
RDIV is positioned deep in HTML structure, some of its ancestor elements are scrollable.
I thought of binding onscroll event in all scrollable parents of RDIV and call reposition of the popup. But,

  1. iterating over its parents and finding scrollable elements will be expensive (tried using client and scroll height)
  2. calling reposition on scroll will also be expensive (as it would use getboundingclientrect to calculate position on every scroll)

I have tried using intersection observer on the popup, but it didn’t work (may be because the element is fixed).

Tried positioning absolute, but some of its ancestor have overflow hidden property, thereby hiding the popup partially.

Is there any way to achieve this, without being much expensive process ?

Source: Ask Javascript Questions