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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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(http://sebastian1012.bplaced.net/bilder/homer.jpeg); top:0; } #zwei{ background-image: url(http://sebastian1012.bplaced.net/bilder/homer.jpg); background-size:contain; top:500px; } #drei{ background-image: url(http://sebastian1012.bplaced.net/bilder/homer.jpeg); 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!