时间戳

首页 > 解决方案 > 在 iFrame 中将 FIXED 定位到 Mainframe

javascript - 在 iFrame 中将 FIXED 定位到 Mainframe

问题描述

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

如果进入页面

例子

滚动后

示例2

.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>

标签： javascripthtmljquerycssiframe

解决方案

在这里查看 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>

推荐阅读