I've encountered an issue with the mobile version of my website. When users scroll to view content, clicking on an icon triggers a slide-in navigation bar from the left side and sets the body to have overflow: hidden;, effectively preventing further scrolling. Is there a way to make the navigation bar 100% height of the window instead of the entire document, allowing users to continue scrolling inside the navigation bar?
Currently, the sliding animation and height adjustment are controlled by JavaScript, but I'm interested in finding a CSS solution for this problem. Can anyone provide guidance?
// CSS
#mobile_nav {
width: 300px;
position: fixed;
top: 0;
left: -300px;
z-index: 10000;
overflow: auto;
}
// JS
jQuery("#mobile_button").on("click", function() {
jQuery("#mobile_nav")
.css({ height: jQuery(window).height() });
.stop(true)
.animate({ left: 0 })
;
jQuery("body").css({ overflow: "hidden" });
});