[FIXED] How to prevent body from scrolling with Responsive menu

Issue

I am trying to properly implement the Responsive Menu plugin into a wordpress theme. The issue appears when the push-side menu is open, which cause body to move at vertical scroll.

At this moment, there is a solution for this template page that is working amazing and I'm happy with the result.

The question: Taking in consideration Outsource WordPress's answer, which fix the above specified page, is there any possibility to tweak the below code in order to be usable in more general way in other template pages as well for example here like already is running here?

I suppose that .edge-ils-item-link and .edge-ils-content-table are variables but I have no idea how to approach and adapt this, I've made some tests replacing these elements but with no positive results, maybe it's not that simple, it's more than that. I also know that edge-wrapper, edge-wrapper-inner, wpb_wrapper are found in every pages, these could be the common elements that could change the solution making it available for every page.

Also it will be great to be jQuery ready according to the latest version (at this point I am using jQuery migrate 1.4.1 and an old version of Wordpress in order to be functional at least on the page designed for).

.scroll-lock{position:fixed !important;}

$(document).ready(function() {
    var windowTop = 0;
    var menuOpen = 0;
    var offsetContainerList = 0;

    $('#responsive-menu-pro-button').click(function() {
        var offsetScrollList = $('.edge-ils-item-link:first').offset().top; 

        if ($('html').hasClass('scroll-lock')) {
            $('#responsive-menu-pro-container').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
                  if (menuOpen==0) {
                      menuOpen = 1;
                      $('html').removeClass('scroll-lock');  
                      $('.edge-ils-content-table').css('top', eval(offsetContainerList)-40+'px'); //change image container top position
                      $('html').scrollTop(windowTop); //scroll to original position
                  }
                  else {   
                      menuOpen = 0;             
                  }
            });
        }
        else {                
            windowTop = $(window).scrollTop();
            offsetContainerList = $('.edge-ils-content-table').offset().top;  
            $('html').addClass('scroll-lock');      
            $('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); //change image container top position
        }      
    }); 
}); 

Video with the issue, if this helps here.

Solution

Ok, first lets talk about the issue:

The plugin is setting transform: translateX(800px); on your main div, but, transform remove the position: fixed from all of its children, so all your inner divs that have position fixed, are basically moved to be position relative so they are basically moved to the top.

The Too Complex Solution:

You can of course play with scrolling the user to the top, saving what position he was, and do a real complex solution to workaround this issue, BUT, all of this for a left menu? it seems to be so much work for a simple fixed div that push other fixed div to the right.

The Easy Solution: Why wouldn't we just omit the transform, and use margin-left?

<style>

html.responsive-menu-pro-open {
  overflow-y: hidden !important;
  padding-right: 9px;
} 

#responsive-menu-pro-container {
  position: fixed !important;
}

#responsive-menu-pro-container {
  position: fixed !important;
  transform: none !important;
  margin-left: -800px;

  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

#responsive-menu-pro-button {
  transform: none !important;
  transition: 2.6s ease !important; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1) !important; 
  transition-property: margin-left !important;
}

.responsive-menu-pro-open #responsive-menu-pro-button {
   margin-left: 800px;
}

#responsive-menu-pro-header {
  transform: none !important;
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open #responsive-menu-pro-header {
  margin-left: 800px;
}

.responsive-menu-pro-open .edge-wrapper {
  transform: none !important;
}

.responsive-menu-pro-open .edge-wrapper .edge-wrapper-inner {
  margin-left: 800px;
}

.edge-wrapper .edge-wrapper-inner {
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open .edge-content .edge-ps-navigation {
  margin-left: 800px;
}

.edge-content .edge-ps-navigation {
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open #responsive-menu-pro-container {
  margin-left: 0;
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open .edge-back-to-top-text {
  display: none;
}

</style>

By adding the snippet above, you mimic the functionality you want without transform using margin-left.

Notes - because of your page layout (its a bit of a mess, a lot of position fixed elements, inside other position fixed elements), you need to set margin-left to different elements, changing the page layout would make it much easier to apply this, or even use the native transform functionality of the plugin.

This solution might only work on the example page you gave us, you will need to set marign-left on the correct elements on your other pages, but again, if you layout all of your pages into a single wrapper div, that will hold the functionality, and remove other fixed elements, you will be able to create a single code snippet that will work on pages.

Bottom line - the plugin have issues because of your page layout, contacting the plugin developers might give you a better answer, and they might look into your specific theme and bring a much better solution. Without seeing your code this is the best work-around I could find without trying to play with scrolls.

Answered By - Art3mix