时间戳

首页 > 解决方案 > 在 iframe 中滚动时修复屏幕顶部的 div

html - 在 iframe 中滚动时修复屏幕顶部的 div

问题描述

这个问题之前已经重复过，我已经尝试了我在互联网上找到的所有内容。

我在 iframe 中有一个 div 'A'，而 iframe 在包装器 div 内。当我试图在移动视图中修复屏幕顶部的 div 'A' 时，它可以在没有 iframe 的情况下工作，但在使用 iframe 时它不起作用。

位置：固定不起作用。我无法在 iframe 之外使用 javascript 动态添加要修复的 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 src 页面（iframe1.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 框架内的 h1 标签

标签： htmlcssiframe

解决方案

您是否考虑过在 iframe 之外修复 div。如果它有一个高度。将该高度设置为 iframe 的上边距？

例如

.divA {
 position: fixed;
 top: 0;
 height: 20vh;
 z-index: 2;
}

你能给 iframe 上课吗？

.iframe{
 margin-top: 20vh;
 z-index: 1;
}

推荐阅读