如何使用响应式菜单防止身体滚动

Question

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.

Answer 1

好吧，首先来说说这个问题：

该插件设置在您的主 div 上，但是，转换会从其所有子项中transform: translateX(800px);删除，因此所有位置固定的内部 div 基本上都会移动到相对位置，因此它们基本上会移动到顶部。position: fixed

过于复杂的解决方案：

您当然可以将用户滚动到顶部，保存他所在的位置，并做一个真正复杂的解决方案来解决这个问题，但是，所有这些都是为了左侧菜单吗？对于一个简单的固定 div 将其他固定 div 推到右侧似乎需要做很多工作。

简单的解决方案： 为什么我们不直接省略变换并使用 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>

通过添加上面的代码片段，您可以模仿所需的功能，而无需使用 margin-left 进行转换。

注意- 由于您的页面布局（有点混乱，很多位置固定元素，在其他位置固定元素内），您需要将 margin-left 设置为不同的元素，更改页面布局将使您更容易应用此功能，甚至使用插件的本机转换功能。

此解决方案可能仅适用于您提供给我们的示例页面，您需要在其他页面上的正确元素上设置 marign-left ，但同样，如果您将所有页面布局到单个包装 div 中，它将保存功能，并删除其他固定元素，您将能够创建可在页面上运行的单个代码片段。

底线- 由于您的页面布局，插件存在问题，联系插件开发人员可能会给您更好的答案，他们可能会研究您的特定主题并带来更好的解决方案。在没有看到您的代码的情况下，这是我可以找到的最好的解决方法，而无需尝试使用卷轴。