[英]Why my working sticky divs don't work inside <iframe>?
我的頁面上有粘性元素。 它按我的意願工作。 但是在我將頁面放入 iframe 后，所有粘性元素都變為靜態。
試圖用overflow: unset;更改每個父 div overflow: unset; ,（甚至 iframe 和 upper）它沒有幫助。
#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>
PS我使用了內聯IFrame所以我不必在某個地方創建一個頁面來托管它。
如果您有可滾動的 iframe，則 Position:sticky 似乎確實有效：<iframe scrolling="yes"...
內容相對於 iframe 的滾動條具有粘性，而不是與宿主頁面的滾動條相關。
iframe 內容的高度必須溢出（大於）指定的 iframe 高度。
為什么 iFrame oEmbed 中的鏈接在 Wordpress 中不起作用？
[英]Why my links inside iFrame oEmbed doesn't work in Wordpress?
為什么 position:sticky with left:0 在可滾動容器內不起作用？
[英]Why isn't position:sticky with left:0 working inside a scrollable container?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.