While working on a website using HTML, CSS, and BS3, I have created a basic mobile navigation. However, I am facing an issue where I want to disable scrolling of the body when toggling the hamburger button.
The problem arises when the menu is toggled on, as it successfully prevents scrolling. But when the menu is toggled off, the scrolling functionality does not work.
Below is a snippet of the HTML code:
<!-- mobile nav links-->
<div class="mob-div-nav">
<div class="row">
<div class="col-xs-12" style="height:100%;">
</div>
</div>
</div>
<!-- END Mobile Nav-->
Additionally, here is the JavaScript code associated with this issue:
$("#hamburger").on("click", function (event){
$(".mob-div-nav").slideToggle(500);
function noscroll() {
window.scrollTo( 0, 0 );
}
// add listener to disable scroll
if ($(".mob-div-nav").css("display") == "block"){
window.addEventListener('scroll', noscroll);
} else if ($(".mob-div-nav").css("display") == "none") {
window.removeEventListener('scroll', noscroll);
}
});