Question

鉴于以下简单的演示，我努力实现所需的行为，我有一个使用translateX在屏幕上定位的菜单。

有几个问题 - 首先，如果我在正文上设置overflow: hidden，它会阻止菜单显示，而只是在菜单切换打开时显示空格。

如果我删除overflow: hidden，那么由于translateX行为，用户可以滚动超出正文宽度的问题（例如，如果您切换打开菜单，请参阅滑动/移动正文回到原位而不使用菜单切换。）

我还希望菜单在打开时可滚动，但部分隐藏的页面内容的其余部分固定在适当的位置。当菜单切换打开时，我已在容器上设置position: fixed，但它没有任何效果。

感谢任何帮助，因为我正在与这个人围成一圈！

＆＃13;

jQuery(document).ready(function($) {

  $('.mobile-menu-toggle').on('click', function(e) {
    e.preventDefault();

    $('body').toggleClass('mobile-menu-open');
  });

  // Close mobile menu if user clicks anywhere outside of the visible menu
  $(document).on('click touchstart', function(e) {

    if (!$(e.target).closest('.mobile-menu-toggle').length &&
      !$(e.target).closest('.main-menu-mobile').length) {


      if ($('body').hasClass('mobile-menu-open')) {
        $('body').removeClass('mobile-menu-open');
      }
    }
  });

});

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  min-height: 100%;
}

body {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  position: relative;
  overflow: hidden;
  margin: 0;
  transition-duration: 200ms;
  transform: translateX(0);
}

body.mobile-menu-open {
  transform: translateX(80%);
}

body.mobile-menu-open .container {
  position: fixed;
  overflow: hidden;
}

.header:before,
.header:after {
  content: " ";
  display: table;
}

.header {
  top: 0;
  /*transition: top 0.2s ease-in-out;*/
  /*transition: none;*/
  background: red;
}

.main-menu-mobile {
  background-color: #ddd;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0;
  min-height: 100vh;
  transform: translateX(-100%);
  width: 80%;
  z-index: 10;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<header class="header">
  <div class="mobile-nav">
    <a href="#" class="mobile-menu-toggle">Menu</a>
  </div>

  <ul class="main-menu-mobile">
    <li>
      <a href="/test">Test</a>
      <div class="dropdown">
        <div class="wrapper">
          <div class="menu-subcategory">
            <h4><a href="/sub">Sub Cat</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/test">Test 3</a>
              </li>
              <li>
                <a href="/test">Test 4</a>
              </li>
              <li>
                <a href="/test">Test 5</a>
              </li>
              <li>
                <a href="/test">Test 6</a>
              </li>
              <li>
                <a href="/test">Test 7</a>
              </li>
              <li>
                <a href="/test">Test 8</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="/test">Test 2</a>
      <div class="dropdown">
        <div class="wrapper">
          <div class="menu-subcategory">
            <h4><a href="/sub">Sub Cat</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
              <li class="view-all"><a href="/women/jackets">View All Jackets &gt;&gt;</a></li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="/test">Test 3</a>
    </li>
    <li>
      <a href="/test">Test 4</a>
    </li>
    <li>
      <a href="/test">Test 5</a>
    </li>
    <li>
      <a href="/test">Test 6</a>
    </li>
    <li>
      <a href="/test">Test 7</a>
    </li>
    <li>
      <a href="/test">Test 8</a>
    </li>
  </ul>
</header>

<div class="container">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
</div>

＆＃13;

Answer 1

所以一种方法是你可以包装你试图在容器中操作的元素（在旧网站中你会看到很多这种元素，顶层称为＆＃34;包装器＆＃34; ）。我更新了你的代码片段并清理了CSS以使其正常工作。

<div class="wrapper">
  <header></header>
  <div>blah</div>
  <div>blah</div>
</div>

https://jsfiddle.net/646tueyL/

我记得当你必须处理响应时，这种方法会导致问题，可能有更高级的方法使用JS或重新思考你的标记结构。

从屏幕外滑动移动菜单 - 溢出问题

1 个答案: