HI, I am trying to hide page’s content while mobile menu is displayed, so only mobile menu scrolls. This can be done easily with interactions, switching display property of the page container to none and then back to block, but that method resets page’s scroll progress and kicks user back to the top.
I found a working example of what I’m trying to achieve, that is made with webflow: https://www.goodbooks.io
Looks like the solution is to change overflow property of the body to hidden and back to visible. As I understood, absolute positioned elements bypass overflow property and that is the trick. But in my case the thing doesn’t work: menu doesn’t scroll.
Here’s the code:
<style>
.no-scroll {
overflow: hidden;
}
</style>
<script>
$('.menu-button').on('click', function(){
$('body').toggleClass('no-scroll');
});
</script>
Please, help.
.
Update:
I figured it out. Have set menu-overlay (div block with links, that’s supposed to be scrolled) position to fixed and overflow to scroll. That made things work. Only the animation bugs me. For some reason links slide out above the menu-bar.