Question

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

有没有人知道为什么translate3d不会很好地修复位置？我做了一些搜索，但找不到解决方案。

基本设置..

包含所有内容的div，在此我有主要内容和侧边栏。我通过切换侧边栏上的类菜单（更改translate3d位置）并向外部包装器添加menu-open（也更改translate3d值）来设置动画。动画流畅，效果很好。

HTML

<!-- 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>

CSS

.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);
    }
  }
}

JS

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);

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

这真让我很烦，所以如果有人能够发光，那我真的很感激！

使用translate3d固定位置并隐藏溢出

0 个答案: