这个问题之前已经重复过，我已经尝试了我在互联网上找到的所有内容。
我在 iframe 中有一个 div“A”，而 iframe 在包装器 div 中。当我尝试在移动 View 中修复屏幕顶部的 div“A”时，它可以在没有 iframe 的情况下工作，但使用 iframe 则不起作用。
位置:固定不起作用。我无法使用 javascript 在 iframe 之外动态添加要修复的 div，因为它会弄乱我的应用程序的结构。
有人可以帮忙吗？我不能分享整个代码。但这是结构，不幸的是我无法避免 iframe。
父页面:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.outside {
position: fixed;
background: blue;
top: 0;
height: 65px;
width: 53px;
z-index: 10;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="outside"></div>
<iframe sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-top-navigation"
allow="geolocation" name="v4wj632" src="./ifram1.html" scrolling="no"
style="width: 100%; border: none; position: relative; height: 1148px; top: 0px; left: 0px; display: block;"></iframe>
</div>
</body>
</html>iframe 源页面 (ifram1.html):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
border: 1px solid red;
position: fixed;
top: 0;
width: 100%;
text-align: center;
z-index: 11;
}
div.para {
clear: both;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>
Hello
</h1>
<div class="para">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</body>
</html>iframe外的div贴在顶部，而i frame内的h1标签
最佳答案
您是否考虑过修复 Iframe 之外的 div。如果它有高度。将该高度设置为 iframe 的上边距？
例如
.divA {
position: fixed;
top: 0;
height: 20vh;
z-index: 2;
}
你能给iframe一个类吗？
.iframe{
margin-top: 20vh;
z-index: 1;
}
关于html - 在 iframe 中滚动时修复屏幕顶部的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59070189/