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. Zeigt zusätzlich noch die gesrollt höhe an

Code

                                    
                                <script src="/js_webseite/jquery.js"></script>
<style>
  body{
  height:2700px;
}

div{
      background-size: cover;
    width: 100%;
    height: 400px;
  position:absolute;
    font-size:50px;
  text-align:center;
  color:red;
  margin-bottom:400px;
}

#eins{
    background-image: url(/image/kermit_.jpg);
  top:0;
}
#zwei{
    background-image: url(/image/kermit_.jpg);
    background-size:contain;
  top:500px;
}
#drei{
    background-image: url(/image/kermit_.jpg);
  top:1600px;
}

</style>
<div id="eins" class="eins">Container 1</div>   
<div id="zwei" class="zwei">Container 2</div>
<div id="drei" class="drei">Container 3</div>



<script>
   $(document).on('scroll',function(){
   let sc=$(document).scrollTop();
   $('div').html(sc)
  if(sc>=500 && sc<=1250){ 
       was=$('#zwei').css('top',sc+'px');    
  }
 });
  </script>