Öffnen von iframe beim scrollen

Hi brauche ein Idee wie ich es anstellen könnte mittels iframes Inhalte(von Webseiten) anzeigen zu lassen, aber nur wenn das jeweilige "anzeigende" iframe sich in der Mitte meiner Webseite befindet, so dass sich jedes weitere iframe nur beim Scrollen meiner Webseite öffnet, und sich das darüber befindliche wieder schliesst.

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <!doctype html>
<html lang="de">
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
body{
   display:flex;
   flex-direction:column;
   min-height:1500px;
}
header{
  background:#27abcd;
  height:100px;
  font-size:80px;
  text-align:center;
}
nav{
  font-size:40px;
  text-align:center;
  margin-bottom:500px;
  display:block;
  background:green;
}
.framebox{
  border:2px solid black;
  margin:120px auto;
  width:60vw;
  height:300px;
}
  </style>
 </head>
 <body>
   <header>HEADER</header>
   <nav>Navigation<br>Bitte im Fenster Scrollen</nav>
   <iframe class="framebox" id="frame1" src=""></iframe> 
   <iframe class="framebox" id="frame2" src=""></iframe>   
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX