CODEWITHSUNDEEP
javascriptjquerycss
Dolarpami Pami
Dolarpami Pami

Reputation: 67

how can I enable and disable scroll by clicking the same element with jquery?

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

Upvotes: 1

Views: 702

Answers (1)

alessandrio
alessandrio

Reputation: 4370

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

Upvotes: 1

Related Questions