CODEWITHSUNDEEP
javascriptcssmenuoverlay
Niroshan
Niroshan

Reputation: 19

Prevent body scroll on click and close of overlay menu css

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");
    });
});

Upvotes: 0

Views: 7543

Answers (2)

Akhilesh Bamhore
Akhilesh Bamhore

Reputation: 1

    $(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;
  }

Upvotes: 0

nicael
nicael

Reputation: 18997

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

Upvotes: 9

Related Questions