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.
The question: Taking in consideration Outsource WordPress's answer, which fix a specified page is there any possibility to tweak the below code in order to be usable in more general way in other 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.
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.
from How to prevent body from scrolling with Responsive menu
No comments:
Post a Comment