0

I'm currently encountering issues with a mobile navigation I have created. It's a simple hamburger icon and when you click it, it opens a fullscreen menu. The problem is I'm trying to disable scrolling when the overlay is visible. Now I figured I could achieve this by adding;

$('body').bind('touchmove', function(e){e.preventDefault()});

But this doesn't toggle within the click event. How would I achieve it, so that it toggles? When clicked again scrolling should be possible again. The full script;

$(document).ready(function () {
  $(".icon").click(function () {
    $('body').bind('touchmove', function(e){e.preventDefault()});
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  }); 
});
Quincy Norbert
  • 431
  • 1
  • 6
  • 18

2 Answers2

0

very useful link :

How to programmatically disable page scrolling with jQuery This code works

$(document).ready(function(){
   $("button").click(function(){
      $('html, body').css({
         overflow: 'hidden',
         height: '100%'
      });
      $("p").toggleClass("main");
   });
   $('html, body').css({
   overflow: 'auto',
   height: 'auto'});  
});
RasInspired
  • 31
  • 5
  • Thanks for the quick reply, but I cant seem to fit this in with the current script I have for the interactive hamburger icon. Can I not toggle a class, which adds those specific css rules to the body/html? – Quincy Norbert Aug 02 '17 at 18:37
  • I have been fiddling around with the css way and got it to work, but it is still able to scroll a little bit because of iOS. The URL bar is able to get a bit smaller when the user tries to scroll. I think it can only be achieved by js unfortunately. – Quincy Norbert Aug 02 '17 at 19:10
  • Can you provide the css and the html file ?Are you using – RasInspired Aug 02 '17 at 19:23
  • I can give you the url of the website. It's currently live and I work with less instead of css. http://www.epicconcepts.nl – Quincy Norbert Aug 02 '17 at 19:31
  • This works as it should; $('body').bind('touchmove', function(e){e.preventDefault()}); except when you click again, you should be able to scroll again. That rule simply needs to be bind and unbind, by the same click. – Quincy Norbert Aug 02 '17 at 19:36
  • I know what you mean now.Yes your right ,you should probably use the unbind then :.$('#some_link').click(function(event){ event.preventDefault(); }); $('#some_link').unbind('click'); See if this helps . – RasInspired Aug 02 '17 at 20:05
  • Yes, thats what I'm looking for, but I am not that experienced with js, so I couldn't figure out how to implement that in the script I had, because I only have a single click event. I'm not sure how to add the unbind part. – Quincy Norbert Aug 02 '17 at 20:15
  • You can look into this too: too.https://stackoverflow.com/questions/1551389/how-to-unbind-a-listener-that-is-calling-event-preventdefault-using-jquery . I cannot test my code on the device. Is there a way you can provide your js as code here? Can you add $('body').unbind(''touchmove"); outside the click function and try ? – RasInspired Aug 02 '17 at 20:17
  • The code as I have it right now is listed above in original question. Somewhere in that script I need to add the unbind function, but I'm not sure where and how. – Quincy Norbert Aug 02 '17 at 20:21
0
 $(document).ready(function () {
  $(".icon").click(function () {
    $('body').bind('touchmove', function(e){e.preventDefault();});
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  }); 
  $('body').unbind('touchmove'); 
});

Can you try this?

RasInspired
  • 31
  • 5