I am working on integrating a push-side menu plugin called Responsive Menu into a WordPress theme. Following the answer from SO @Congrim, I have successfully implemented a method to lock the body at scroll when the push-menu is open, with all elements including the header fixed, except for the interactive links with class="edge-ils edge-ils-with-scroll edge-ils-light" which will still move up when the push-menu is opened.
I have saved this functionality in a file named congrim.js and have enqueued the script in the theme's functions.php file:
function lockScroll() {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
}
$(document).ready(function() {
$('#responsive-menu-pro-button').click(function() {
lockScroll();
});
});
Removing the jQuery wrap does not result in any errors in the browser console (tested in Chrome), but may not be the best practice when working with WordPress. Unfortunately, using overflow: hidden in the CSS class .lock-scroll does not work as expected when the push-side menu is open. It only allows me to use position: fixed instead of overflow: hidden.
The question:
Is there a way to prevent the interactive links with class="edge-ils edge-ils-with-scroll edge-ils-light" from moving up when the push-side menu is open, and keep them in their original position before the menu was opened?
Please focus on resolving the issue with the interactive links only, as the header, logo, and background pictures are displaying correctly.
Note: Using overflow: hidden seems to cause an unwanted shifting effect on the body during the show/hide scrollbar action, which is not occurring currently.
Update: The congrim.js file has been replaced with body-lock.min.js by Outsource WordPress. You can view the solution below.
Test the website page here.