Lösungen ,test

hinterheaderausblenden.php

Quell Code

 <iframe srcdoc='
 <body>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    html{
        height:500px;
    }
      body{
  background: linear-gradient(to bottom, red,orange,yellow,green,blue,indigo,violet); 
  height:2000px;
}

*{ 
  margin:0;
padding:0;
}
header{
  position:fixed;
  top:0;
  width:100%;
  height:200px;
  border:3px solid black;
    font-size:900%;
  text-align:center;
}
#content{
  margin-top:200px;
  font-size:1500%;
  text-align:center;
}
      
    </style>
  </head>
  <header>
    
    HEADER
  </header>
  <div id="content">
    <p>c</p><p>o</p><p>n</p><p>t</p><p>e</p><p>n</p><p>t</p>
    
  </div>
  
  <script>

  $(document).on("scroll",function(){ 
$( "#content>*" ).each(function( i ) {
 var p = $(document);
  var p1=$( "#content>*" ).eq(i); 
 var offset = p1.offset();
 var g1=offset.top; 
 var g=p.scrollTop(); 
  var g1=g1-100;;
 if(g>=g1){
   
  $( "#content>*" ).eq(i).css("opacity","0");
 }else  if(g<=g1){
$( "#content>*" ).eq(i).css("opacity","1");
 }
});
});  

  </script>
</body>
</html>' style='height:500px;width:100%;border:none;outline:none'></iframe>