1

I would like to disable the scroll when the 'Menu icon' of my page is clicked, and then enable the scroll again when the menu is clicked again to close.

I'm trying something like this: 

$(document).ready(function(){

  $(".menu").click(function (e) {
    $(".menucontent").show();
    if ( $(".menucontent").is(":visible")) {
      $('html, body').css({ overflow: 'hidden', height: '100%'});
    }else{
      $('html, body').css({ overflow: 'auto', height: 'auto'});      
    }

  });
  });

but I need some help because I'm kind of newbie on this language

Dolarpami Pami
  • 67
  • 1
  • 7
  • Check [this](http://stackoverflow.com/questions/19817899/jquery-or-javascript-how-to-disable-window-scroll-without-overflowhidden) – Sylogista May 14 '17 at 20:30
  • How does it fail? Are you getting errors in the console? –  May 14 '17 at 20:35
  • it actually disable the scrolll when menu's content is visible, but it doesn't work when I click again the menu button, the scroll would be enable again, but it doesn't result – Dolarpami Pami May 14 '17 at 20:53
  • What you've provided works as expected https://codepen.io/anon/pen/gWKrYd if it isn't doing what you want, try describing your end goal another way. – Michael Coker May 14 '17 at 20:56
  • maybe I'm not explaining myself well... What I want to do is that after doing anything, the scroll of the page works as usual, but when I click on the menu button, the menu's content is showed and the scroll gets desabled, so I can't move anything untill I close the menu and then the content is hided, and the scroll goes back to the initial status, wich means enable again. – Dolarpami Pami May 14 '17 at 21:06

1 Answers1

1

you should put toggle() instead of show

toggle: Display or hide the matched elements.

$(document).ready(function(){
  $(".menu").click(function (e) {
    $(".menucontent").toggle();
      if ( $(".menucontent").is(":visible")) {
        $('html, body').css({ overflow: 'hidden', height: '100%'});
      }else{
        $('html, body').css({ overflow: 'auto', height: 'auto'});      
      }
    });
  });
alessandrio
  • 4,282
  • 2
  • 29
  • 40
  • you guys don't get it yet u.u . The poblem is not about how I show or not the content, the problem is the scroll... I want the scroll of the page to be enable before showing the content and disable while is visible. – Dolarpami Pami May 14 '17 at 21:12