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>

67 thoughts on “Position FIXED to Mainframe in a iFrame”