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(http://basti1012.de/bilder/2.png); background-size: cover; width: 100%; height: 500px; } .zwei{ background-image: url(http://sebastian1012.bplaced.net/bilder/homer.jpg); background-size:contain; width: 100%; height:500px; } .drei{ background-image: url(http://sebastian1012.bplaced.net/bilder/homer.jpeg); 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>

Add Comment

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

Comments

No comments yet. Be the first!