How to prevent body from scrolling with push-side menu

Question

I am trying to properly implement a push-side menu plugin (Responsive Menu) into a wordpress theme. Based on SO @Congrim answer, I've managed to achieve a way to lock the body at scroll when push-menu is open (with all the elements including the header fixed) except the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light which will still go Up at push-menu open.

I've saved this sequence into congrim.js file, I've enqueued the script into the theme in functions.php file:

function lockScroll() {
    if ($('body').hasClass('lock-scroll')) {
        $('body').removeClass('lock-scroll');
    }
    else {
        $('body').addClass('lock-scroll');
    }
}


/* I've implemented `onclick="lockScroll();"` in button element, 
 * using this sequence in the same congrim.js file:
 */    

$(document).ready(function() {
    $('#responsive-menu-pro-button').click(function() {
       lockScroll();
    }); 
});

Removing the jQuery wrap will not give any error in browser console (tested in Chrome) may be still a bad approach to wrapp the code like this in wordpress (?) In these conditions, unfortunately, overflow: hidden; doesn't apply, at push-side menu open, I can't use this class in CSS file/section:

.lock-scroll {
    overflow: hidden;
}

The code will allow me to use only

.lock-scroll {
    position: fixed;
}

The question:
Is there any possibility to force the code to implement overflow: hidden;* OR any other a workaround in order to have the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light not going up at push-side menu open, to remain fixed at the position the viewer is clicked before opening the menu?

Please focus on the interactive links issue only, the rest of the scene is fine (header and the logo are in place like it should be, the background pictures are acting like it should as well).

LE: *overflow: hidden; it looks like will produce an unwanted body shifting effect at menu open/close, during the show/hide scrollbar, which is not happening in this stage.

LE2: congrim.js file has been replaced with body-lock.min.js by Outsource WordPress, please see the solution below.

Website testpage here.

Answer 1

Your scroll isn't a natural navigator-based scroll, you have a JS somewhere swapping classes to emulate a scroll (edge-appeared,edge-up,edge-down).

On the push-side menu opening, these classes are reset, overflow-hidden won't change that.

You need to find which JavaScript is swapping those classes and prevent it from doing so, I'd be glad to be of further help but you have so many JS files that it would take quite some time to go through all of these. If you succeed in making a Minimal, Complete, and Verifiable example please post it here.

Answer 2

Please check the solution given below.

Step 1: Add this CSS .scroll-lock{position:fixed !important;}.

Step 2: Add this JS.

$(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
        }      
    }); 
}); 

That's it!

Answer 3

Please add the below code in your custom js file .

 jQuery('#responsive-menu-pro-button').click(function(){
    var menu_active = jQuery(this).hasClass('is-active');
    if(menu_active){
        jQuery('body').css('position','fixed');
    }else{
       jQuery('body').css('position','static');
    }
});

I hope it helps you.

Thanks