basti1012.bplaced.net

Das erste Bild Scrollt normal weg. Das Zweite auch bis es am oberen Rand angekommen ist und bleibt dann auch stehen. Das 3 Bild Scrollt wieder ganz normal.

Code

                                    
                                <style>
   
.start{
    background-image: url(/image/2.png);
    background-size: cover;
    width: 100%;
    height: 500px;
}
.zwei{
    background-image: url(/image/kermit_.jpg);
    background-size:contain;
    width: 100%;
    height:500px;
 
}
.drei{
    background-image: url(/image/kermit_.jpg);
    background-size: cover;
    width: 100%;
    height: 500px;

}
div{
  font-size:50px;
  text-align:center;
  color:red;
  margin-bottom:200px;
}
</style>
<div class="start">Container 1</div>
<div class="zwei">Container 2</div>
<div class="drei">Container 3</div>
<script>
 $(document).on('scroll',function(){
  let hoheeins=$('.start').height(); 
   let scrsteht=$(document).scrollTop()-200;
  if(scrsteht>=hoheeins){ 
       $('.zwei').css('background-attachment','fixed');
  }else{
   $('.zwei').css('background-attachment','scroll');  
  }
  })





 
</script>