javascript - Keep fixed position inside an iframe relative to the whole screen - Stack Overflow

admin管理员组

文章数量:1405377

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?

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?

• javascript
• html
• css
• iframe
• position

Share Improve this question Follow edited Dec 2, 2022 at 14:46 Michael M. 11.1k1111 gold badges2121 silver badges4444 bronze badges asked Nov 3, 2016 at 12:33 STESTE 66633 gold badges99 silver badges1818 bronze badges 2

• Can you provide a minimal, plete and verifiable example of the app so we can put as the source of an iframe ourselves? Because if you try to iframe something like getbootstrap./examples/navbar-fixed-top it does maintain its position on the top. – Juan Ferreras Commented Nov 3, 2016 at 13:01
• 1 The question is whether it's possible to have an element inside an iframe stay fixed relative to the whole window. Here's an example: jsfiddle/9stbu5zr . Is there a way to have the inner fixed element stay in the same position as the whole window is scrolled? – gbs Commented Nov 3, 2016 at 20:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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.

本文标签： javascriptKeep fixed position inside an iframe relative to the whole screenStack Overflow