Currently I have an overlay CSS menu that is initiated through a click. However the page behind it is still scrollable. I'm sure this is a simple fix, but i'm new to css/js and any help would be great!

Currently I have a js toggle function that when .icon (hamburger icon) is hit the .mobilenav (overlay menu) is faded over the page.

What kind of function can I add to prevent body scrolling once this toggle function is enabled?

Anything I can easily add to this function below?

    $(document).ready(function () {
    $(".icon, .link").click(function () {
        $(".mobilenav").fadeToggle(700);
        $(".top-menu").toggleClass("top-animate");
        $(".mid-menu").toggleClass("mid-animate");
        $(".bottom-menu").toggleClass("bottom-animate");
    });
});

Currently I have an overlay CSS menu that is initiated through a click. However the page behind it is still scrollable. I'm sure this is a simple fix, but i'm new to css/js and any help would be great!

Currently I have a js toggle function that when .icon (hamburger icon) is hit the .mobilenav (overlay menu) is faded over the page.

What kind of function can I add to prevent body scrolling once this toggle function is enabled?

Anything I can easily add to this function below?

    $(document).ready(function () {
    $(".icon, .link").click(function () {
        $(".mobilenav").fadeToggle(700);
        $(".top-menu").toggleClass("top-animate");
        $(".mid-menu").toggleClass("mid-animate");
        $(".bottom-menu").toggleClass("bottom-animate");
    });
});

• javascript
• css
• menu
• overlay

2 Answers 2

I guess you are looking for something like this:

document.body.style.overflow="hidden"

And to be able to scroll again, use

document.body.style.overflow="scroll"

Example:

document.body.onclick=function(){
  this.style.overflow="hidden"
}

Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>

Also, as you are using jQuery, something like this would work too:

$('body').css('overflow', 'hidden'); // disables scrolling
$('body').css('overflow', 'scroll'); // enables scrolling

    $(document).ready(function () {

        $(".icon, .link").click(function (event) {
            event.preventDefault();
            $('body').toggleClass('overflow');
            $(".mobilenav").fadeToggle(700);
            $(".top-menu").toggleClass("top-animate");
            $(".mid-menu").toggleClass("mid-animate");
            $(".bottom-menu").toggleClass("bottom-animate");
        });
    });

   Add the below piece of code into css file

  .overflow
  {
     overflow:hidden;
  }