Keep Fixed Position Inside An Iframe Relative To The Whole Screen

Context: We're serving our app through an iframe inside our clients websites The iframe is seamless and scrolling happens only in the parent div right now. One of the Divs in our

Solution 1:

I do not see an other solution than dynamically setting the position onScroll from the outer frame, like this:

$(() => {
  $('#contentframe').ready(() => {
    const topElem = $("#top", frames['contentframe'].document);
    const topElemTopPos = topElem.offset().top;
    $(window).on('scroll', () => {
      const scrollFromTop = $(document).scrollTop();
      topElem.css({ top: (scrollFromTop + topElemTopPos) + "px" });
    });    
  });
});

https://codepen.io/jobe451/pen/OJWJGQX

Solution 2:

You can't do it unless you've got access to the hosting page as well.

EDIT: Given the fact you can control the hosting page too, it is sort of possible, but won't be easy or pretty :/.

It has to be via a fixed positioned element on the hosting page and right now I can only think of two variations on top of that:

1. Have the fixed element outside the iframe. Your script on the hosting page can create it.
2. Divide your iframe to two: one with the element which you want fixed (with position: fixed style) and another with everything else. Again, your script will create two iframes instead of one.