Javascript 位置固定，平移3d和溢出隐藏

我正在创建一个带有移动侧边栏的网站，通常的东西，你点击汉堡菜单，菜单从侧面滑出。除了一个问题外，这一切都很有效。我希望侧边栏固定在左侧，只有主要内容可以滚动；我正在使用translate3d制作动画，我想我已经指出了这个问题

有人知道为什么translate3d在位置固定的情况下打得不好吗？我做了一些搜索，但找不到解决方案

基本设置

一个包含所有内容的div，其中包含主内容和侧边栏。我通过切换侧边栏上关闭的类菜单（更改translate3d位置）和将打开的菜单添加到外部包装器（也更改translate3d值）来设置动画。动画平滑，效果良好

HTML

JS

这个问题是固定侧边栏现在变成可滚动的，而不是固定在左侧。我只希望主要内容是滚动的，而不是边栏以及

这真的让我很恼火，如果有人能给我点启示，我会非常感激的

<!-- outside wrapper -->
    <div class="wrapper">

      <!-- sidebar-->
      <div id="sidebar-wrapper" class="sidebar menu-closed">

        <div class="branding">
          <h2></h2>
          <span></span>
        </div>

        <div class="search">
          <form>
            <input class="form-control" type="search" placeholder="search" />
            <span class="glyphicon glyphicon-search"></span>
          </form>
        </div>

        <ul class="nav nav-sidebar">
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
          <li><a href="#">link 5</a></li>
        </ul>
      </div>
      <!-- end sidebar -->


      <!-- main container -->
      <div class="container-fluid page-container">

        <!-- mobile navbar -->
        <nav class="navbar navbar-custom navbar-fixed-top hidden-sm hidden-md hidden-lg">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
          </div>
        </nav>
        <!-- end navbar -->

        <!-- video background -->
        <div class="row">
          <div class="header-video">
            <div class="header-video--media" data-video-src="0CxWLQxvY9g" data-teaser-source="/video/elle" data-provider="Youtube" data-video-width="500" data-video-height="281"></div>
          </div>
        </div>
        <!-- end video -->

        <!-- grid-container -->
        <div class="grid-container">
          <div class="cell cell-1"></div>
          <div class="cell cell-1 transparent"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-2"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-1 transparent"></div>
          <div class="cell cell-2"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-1 transparent"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-2"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-2"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-1 transparent"></div>
          <div class="cell cell-2"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-2"></div>
          <div class="cell cell-2"></div>
          <div class="cell cell-1 transparent"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-2 transparent"></div>
          <div class="cell cell-1"></div>
          <div class="cell cell-1"></div>
        </div>

      </div>      
    </div>

.container, .wrapper {
  @include transition(all 0.35s);

  &.menu-open, .menu-open {
    transform: translate3d(175px, 0, 0);
  }
}

.sidebar {
  position: fixed;
  transform: translate3d(0, 0, 0);
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  background: $sidebar-colour;
  border-right: none;
  width: 175px;
  height: 100%;
  @include transition(all 0.35s);

  &.menu-closed {
    transform: translate3d(-175px, 0, 0);
  }
}

@media (min-width: 768px) {
  .sidebar {
    &.menu-closed {
      transform: translate3d(0, 0, 0);
    }
  }
}

window.toggleSidebar = (function(toggleSidebar, $, undefined) {

  /**
   * init
   */

  var init = function() {
    $('.navbar').on('click', '.navbar-toggle', function() {
      toggleClassname('#sidebar-toggle', 'menu-closed');
      toggleClassname('.wrapper', 'menu-open');
    });
  };

  var toggleClassname = function(elem, classname) {
    return $(elem).toggleClass(classname);
  };

  return {
    init: init
  };

})(window.toggleSidebar || {}, jQuery);