Setting a group to be % of viewport height dynamically

Tips
34

@khabazkameel + @jason1 + @hi1, here is a method that does the trick.

The setup:

image
image1015×611 17.3 KB

JS on page load:

$(document).ready(function(){ 
$("#white-1").css("height","100vh"); 
$("#yellow-2").css("transform","translateY(100vh)");
$("#yellow-2").css("height","100vh");
$("#main-page").css("height","200vh");
});

JS on page resize:

<script> $(window).resize(function(){ $(".main-page").css("height","200vh"); }); </script>

Page:

https://testingenvironment.bubbleapps.io/version-test/full-height-sections?debug_mode=true

Editor:

4 Likes