Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
BackgroundBild fixieren nach einer Scroll höhe mit Pixel a

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>