Question

我的页面上有粘性元素。它按我的意愿工作。但是，当我将页面放入iframe中之后，所有粘性元素都变为静态。

试图用 overflow：unset; （甚至iframe和上半部）来更改每个父级div，但没有帮助。

  #accessBar {
    高度：70px；
    z索引：100；
    背景：＃e8eeff;
    位置：粘性；
    宽度：calc（100％--40px）;
    底部：-1px；
    左边距：-30px;
}

Answer 1

IFrame的样式应该在IFrame本身之内。请注意，Sticky规则将在IFrame

内适用

<!DOCTYPE html>
<html>

<body>
  <style>
  iframe { height:200px;   border: 0; }
  </style>
  <p>Your Page with Some Content...</p>
  <iframe srcdoc="<!DOCTYPE html><html><body><div id='accessBar'>AccessBar</div>Long Document Ahead:<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>End of Long Document<style>html, body{ min-height:100%;position:relative} #accessBar {
  background: #e8eeff;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  height: 20px;
}</style></body></html>"></iframe>
</body>

</html>

P.S 我使用了内联IFrame，因此无需在某处创建页面来托管它。

为什么我的粘性div在<iframe>中不起作用？

1 个答案: