Question

上下文：

我们通过客户网站内的iframe服务我们的应用
iframe是无缝的，滚动只在父div中发生。
我们的应用程序中的一个Div具有固定的位置，无论您滚动多少都应该始终存在。
更新：我们在iframe旁边部署了一个javacript脚本，因此我们可以访问托管页面

问题：当在iframe内部提供时，固定位置Div似乎没有相对于整个网页保持其固定位置。意思是，当有人滚动时，固定的div不再真正保持固定。

有没有解决办法？

Answer 1

除非您也可以访问托管页面，否则无法执行此操作。

编辑：鉴于您可以控制托管页面这一事实，它有点可能，但不会轻松或漂亮：/。

必须通过托管页面上的fixed定位元素，现在我只能想到两个变体：

将固定元素放在iframe之外。托管页面上的脚本可以创建它。
将您的iframe分为两个：一个包含您想要修复的元素（使用position: fixed样式），另一个包含其他内容。同样，您的脚本将创建两个iframe而不是一个。

Answer 2

除了从外框动态设置 onScroll 的位置外，我没有看到其他解决方案，如下所示：

$(() => {
  $('#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

保持相对于整个屏幕的iframe内的固定位置

2 个答案: