Enabling/disabling Touchmove On Click

I'm currently building a site with a really simple overlay effect - I have a 'hamburger' (.mobilemenu) menu icon, which when clicked toggles a pseudo class on my navigation overlay

Solution 1:

Change this

if('.mobile-nav').hasClass('active'){
  //...
}

To

if(jQuery('.mobile-nav').hasClass('active')){
   //...
}

Solution 2:

Don't forget $ or "jQuery" before all Element selection in jQuery ... to make an If Statement work, it needs to be

if (true) { ...something };

So for yours jQuery('.mobile-nav').hasClass('active') === true

So You need to encapsulate it in parentheses , so

jQuery('.mobile-nav').hasClass('active') needs to be in parentheses...

if(jQuery('.mobile-nav').hasClass('active')){
    //doSomething
}

Solution 3:

Ok the solution (after lots of trial and error and way too many hours spent on this!) is really simple - binding using .on() and unbinding via .off - Here is the final jQuery code:

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
        if(jQuery('.mobile-nav').hasClass('active')) {
            $('body').on('touchmove', false);
        } else  {
            $('body').off('touchmove', false);
        }
});

If anyone can see any flaws in this approach or ways to neaten it up that would be great. Seems to be working nicely though!