在 iFrame 中将 FIXED 定位到 Mainframe

Posted 2023-05-08

技术标签:

【中文标题】在 iFrame 中将 FIXED 定位到 Mainframe【英文标题】：Position FIXED to Mainframe in a iFrame 【发布时间】：2021-05-18 01:38:06 【问题描述】：

我有一个位于<iFrame> 中的“按钮框”。此按钮框应基于主框架的位置。我目前正在使用执行此操作的 javascript 方法。但是，这意味着滚动时会有相当长的延迟。你有解决这个问题的办法吗？谢谢！

如果你进入页面

滚动后

.menue

background-color: green;

height : 20%;





.sidemenue

background-color: red;

width : 20%;

height : 80%;

float: left;





#Source

background-color: yellow;

width : 79%;

height : 80%;

float: left;

<html>

<head>Example</head>

<body>



<div class="menue">

test test test test test test test test test test test 

</div>



<div class="sidemenue">

test<br />

2nd test<br />

4rd test<br />

4th test<br />

5th test<br />

6th test<br />

7th test<br />

8th test<br />

9th test<br />

</div>



<iframe id="Source">



// other File

<div>

<input type="button" value="Save" /> //<- This one should be position: fixed based on the view area of the parent

</div>

// other File!



</iframe>



</body>



</html>

【问题讨论】：

【参考方案1】：

在这里检查 https://www.awesomescreenshot.com/video/2756448?key=f606d51852b6cc71bda7e5c23cee662c

.group 
  display: flex;
  flex-wrap: wrap;


.mb-50 
  margin-bottom: 50px;


.menue 
  background-color: green;
  height: 150px;
  width: 100%;


.sidemenue 
  background-color: red;
  width: 20%;
  height: calc(100vh - 150px);
  padding: 50px;


#Source 
  background-color: yellow;
  width: 80%;
  height: calc(100vh - 150px);
  padding: 50px;
  overflow: auto;


.btnsave 
  position: fixed;
  bottom: 10%;
  right: 40%;
  transform: translateX(-40%);


.btnsave input[type="button"] 
  cursor: pointer;
  outline: none;
  background: red;
  padding: 13px 30px;
  border: 0;
  border-radius: 35px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: 0.5s;


.btnsave input[type="button"]:hover 
  box-shadow: 0 0 10px 0 #000;

<!doctype html>
<html dir="ltr" lang="en-US">

<head>
  <title>Demo</title>

  <link type="image/x-icon" rel="shortcut icon" href="assets/image/favicon.png" />
  <!-- Required meta tags -->
  <meta charset="UTF-8" />
  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <link type="text/css" rel="stylesheet" href="assets/css/democss.css" />

</head>

<body>

  <!-- Queston-1 -->
  <div class="group">
    <div class="menue">
      test test test test test test test test test test test
    </div>
    <div class="sidemenue">
      test<br /> 2nd test<br /> 4rd test<br /> 4th test<br /> 5th test<br /> 6th test<br /> 7th test<br /> 8th test<br /> 9th test<br />
    </div>

    <div id="Source">
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="mb-50">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum pariatur odit perferendis optio veritatis! Dolores beatae blanditiis maiores, quia sapiente architecto rem temporibus iure ipsam deserunt magnam ab eos porro!
      </div>
      <div class="btnsave">
        <input type="button" value="Save" />
      </div>
    </div>
  </div>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="assets/js/jquery-3.5.1.slim.min.js"></script>
  <script>
  </script>
</body>

</html>

【讨论】：

首先，感谢您的帮助。问题是，在你的情况下 <div id="Source"> 在我的情况下是 <iframe id="Source">

以上是关于在 iFrame 中将 FIXED 定位到 Mainframe的主要内容，如果未能解决你的问题，请参考以下文章

iframe子页面position的fixed

IE 上固定定位的 iframe 的问题

怎么让设置fixed层里的内容跟随滚动条滚动

css里面的position:fixed在iframe里面无效

在 Swift 中将两个数组合并为一个字典

iframe中的模态框遮罩父窗口原理