BackgroundBild fixieren nach einer Scroll höhe mit Pixel anzeige
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
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>