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 app has a fixed position and should always be present, no matter how much you scroll.
• Update: We deploy a javacript script next to the iframe, so we have access to the hosting page

The problem: When served inside the iframe, the fixed position Div doesn't seem to retain its fixed position relatively to the whole webpage. Meaning, when someone scrolls, the fixed div doesn't really stay fixed anymore.

Is there any workaround for that?

回答1:

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.

来源：https://stackoverflow.com/questions/40401630/keep-fixed-position-inside-an-iframe-relative-to-the-whole-screen