< >

hinterheaderausblenden.php


Quell Code


 <body>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
      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>