BackgroundBild fixieren nach einer Scroll höhe
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.
Der hier verwendete 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>