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

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

试图用 overflow: unset;更改每个父级，即使是iframe和ups(无济于事。

#accessBar {
    height: 70px;
    z-index: 100;
    background: #e8eeff;
    position: sticky;
    width: calc(100% - -40px);
    bottom: -1px;
    margin-left: -30px;
}

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，所以我不必在某个地方创建一个页面来托管它。

位置：如果您有可滚动的iframe：＆lt; iframe scrolling ='yes'yes＆quort; ...

内容与iframe的滚动条有关，而不是主机页面。

iframe内容的高度必须溢出(大于指定的iframe高度(。

相关内容

最新更新

热门标签：