Hey Artem
I have had this problem as well, although with a full height nav menu like the ones from Apple. I checked their website out and this is some custom code for Webflow, that helped me to freeze the body.
Note that this will freeze the scroll on all devices.
Add this custom code before the </body>
tag (already changed to fit your project):
<script>
Webflow.push(function() {
var clicked = "false";
$('.highlight-link, .exit-popup').click(function(e) {
e.preventDefault();
var overflowState = 'auto'
if (clicked == "false") {
overflowState = 'hidden';
clicked = "true";
console.log("Enter");
} else {
overflowState = 'auto';
clicked = "false";
console.log("Exit");
}
$('html, body').css('overflow', overflowState);
});
});
</script>
Add height: 100%
in your body(All Pages)
inside Webflow Designer. Just select body in the navigator, click on the selector in style and choose body(All Pages)
.
Remember. Scripts only work in published sites. Try publishing and then testing with the developer tools. If you see Enter and Exit in the console. You are good to go
Lastly just delete console.log("Enter");
and console.log("Exit");
. Publish again. Done.
Hope this helps a little
Link to original post:
Link to test site:
http://david-lin-testsite.webflow.io/fixed-popup