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
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete 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>