Check ob element im Feld

            
               <!doctype html>
<html lang="de">
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.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>   
   <iframe class="framebox" id="frame3" src=""></iframe>   
   <iframe class="framebox" id="frame4" src=""></iframe>  
   <iframe class="framebox" id="frame5" src=""></iframe> 
   <iframe class="framebox" id="frame6" src=""></iframe>   
   <iframe class="framebox" id="frame7" src=""></iframe>   
   <iframe class="framebox" id="frame8" src=""></iframe> 
   <script>
     function isElementPartiallyInViewport(el){
    if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];
    var rect = el.getBoundingClientRect();
    var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
    var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
    var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
    return (vertInView && horInView)
}
var helper=false;

function isElementInViewport (el) {
    if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];
    var rect = el.getBoundingClientRect();
    var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
    return (
           (rect.left >= 0)
        && (rect.top >= 0)
        && ((rect.left + rect.width) <= windowWidth)
        && ((rect.top + rect.height) <= windowHeight)
     
    );
  // console.log(el.id+'='+rect.height+'='+rect.top)
}
var stylevariable='<style>*{ font-size:40px;text-align:center}</style>';

window.addEventListener('scroll',function(){
    elem=document.querySelectorAll('.framebox');
    elem.forEach(function(ele){
        var inVpFull = isElementInViewport(ele);
        var inVpPartial = isElementPartiallyInViewport(ele);
        if(inVpPartial==true){
            ele.setAttribute('srcdoc',`${stylevariable}  Element ist im Fenster`);
            ele.style.border='5px solid orange';
            if(inVpFull==true){
                ele.setAttribute('srcdoc',`${stylevariable}  Jetzt ist das Element ganz zu sehen`);

       ele.style.height='500px';  
                ele.style.border='5px solid green';

            }else{
                ele.setAttribute('srcdoc',`${stylevariable}  Jetzt sieht man es nur zum Teil`);

                ele.style.border='5px solid orange';
   
            }
        }else{
            ele.setAttribute('srcdoc',`${stylevariable}  Element ist auserhalb des fensters`);
            ele.style.border='5px solid red';
        }

    });
})




   </script>
</body>
</html>
External Javascript and CSS
