Question

目标：我试图在浏览器窗口底部的iframe中设置一个粘性元素 - 直到它碰到iframe窗口的底部，然后，当在元素保持放置的父页面上向下滚动，如果再次向上滚动，元素将再次位于浏览器窗口的底部。

没有iframe一个简单的解决方案（以及我想要实现的展示）将是这样的： https://jsfiddle.net/30a1sxk9/2/

我的包含此iframe的页面大致如下所示： https://jsfiddle.net/q9m1h2j5/1/

- ＆GT;由于滚动发生在iframe之外，固定位置始终位于底部。

我正在寻找一个强大而高效的解决方案，以便在iframe 的iframe 的iframe中定位此元素（具有适当的边界）。我的主要问题是我无法访问周围的页面 - 除了来自iframe内的JavaScript（由于容器和iframe具有相同的域，因此Cross源不应该出现问题）
因此，我无法保证iframe之外的内容，但必须将其考虑在内以确定元素的位置。我也无法更改页面的常规设置。

我的方法就是这样，在iframe中：

let $footer = $('.sticky-footer');

window.parent.onscroll = function() {
  let footerPos = this.scrollY + this.innerHeight - 60;

    console.debug('onScroll: ', footerPos);
  $footer.css({
    position: 'absolute',
    top: footerPos + 'px'
  })
};

我在window.parent上放了一个onscroll监听器，并计算和设置每个事件调用的元素的绝对位置。

但是我无法弄清楚如何计算粘脚 - 应该在哪里的确切绝对位置以及允许它移动的边界。我必须确定iframe和底部位置的确切Y顶部位置 - 这在某种程度上是否可靠？

此外，我不确定是否设置这样的绝对位置是一种非常好的方法 - 因为在第一次原型设计之后我注意到在快速滚动时出现了一些抖动 - 所以也许CSS转换会更好？或者有不同的方法来实现这一目标吗？

非常感谢任何帮助，解决方案和提示！

根据父窗口滚动将固定元素定位在iframe中

0 个答案: