Position FIXED to Mainframe in a iFrame

I have a "button box" which is in an <iFrame>. This button box should be based on the position of the main frame. I am currently using a Javascript method that does this. However, this means that there is a fairly long delay when scrolling. Do you have a solution to this problem? Thanks!

If you ennter the page

example

after you scrolled

example2

.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 thought on “Position FIXED to Mainframe in a iFrame”

  1. Check this here
    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>
    Reply

Leave a Comment