Question

我一直在研究这个问题已经有一段时间没有运气了。我尝试过不同的解决方案，我在这里和其他地方找到但到目前为止没有任何工作。

我在这里有一个小提琴示例：

#navbarsExampleDefault {
  outline: 5px solid red;
  position: fixed;
  top: 0;
  right: -50%;
  background-color: black;
  z-index: -1;
  display: block;
}

.active-state {
  -webkit-transform: translate3d(-50%, 0, 0);
}

.navbar {
  outline: 5px solid red;
}

我想要做的是让我的sidenav固定，而身体滚动。我也希望导航保持固定，所以我可以点击切换器来关闭侧边。

现在，正如它所说的那样，侧面和身体一起滚动。更糟糕的情况是，我至少希望修复sidenav并滚动整个身体。我会找到另一种方法来关闭sidenav。

任何帮助都会受到赞赏。

PS。如果我移除了右边：-50％的位置，sidenav按预期工作，它会粘在顶部。但是我希望sidenav固定在顶部，侧面和身体-50％。

Answer 1

我在上面评论过我认为你应该重构你的HTML，我不是在评论设计，而是严格的代码。您可以保持设计不变，只重构HTML。

从一个较小的盒子开始，让它以你想要的方式工作，然后只添加所有图标，边框 - 半径和其他小触摸，这样就可以更容易地设置所有内容。

如果我理解了你的要求，我会说你可以从这样的事情开始：

＆＃13;

$("button").on('click', function() {
	$(".container").toggleClass("menu-open");
})

＆＃13;

* {
  box-sizing: border-box;
}

.container {
  transition: margin-left 125ms ease-in-out;
  width: 100%;
  overflow: visible;
}

.navbar {
  position: fixed;
  top: 0;
  background-color: black;
  color: white;
  width: 100%;
  transition: margin-left 125ms ease-in-out;
}

button {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.navbar .dropdown {
  position: absolute;
  left: 100%;
  top: 0;
  width: 200px;
  background: #BADA55;
  padding: 40px;
}

.container.menu-open {
  margin-left: -200px;
}

.container.menu-open {
  margin-left: -200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="navbar">
    NavBar
    <button>
    Toggle Menu
    </button>
    <div class="dropdown">
      Dropdown
    </div>
  </div>
  
  <div class="content">
    <h2>I add some content to make the scrollbar appear</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eaque. Esse quidem aliquid laudantium ea, perspiciatis praesentium incidunt cupiditate autem excepturi dolorum officia voluptatem quasi ducimus non tenetur blanditiis, ipsum quam voluptates eveniet est. Magnam neque, quo error, ullam temporibus earum, architecto omnis cum totam facilis aut expedita tempora? Iste aliquam, libero itaque, animi alias pariatur quos iure recusandae neque quo. Assumenda consequuntur doloremque cumque rerum aperiam, blanditiis incidunt voluptatibus! Hic maxime saepe nostrum eligendi, eveniet optio temporibus earum ipsum sunt et, qui voluptatem odit corporis natus animi inventore non expedita autem. Facilis ea quam perferendis dignissimos beatae! Aperiam culpa porro impedit ullam aliquam officiis nesciunt itaque pariatur sapiente, vitae quos quibusdam fugit exercitationem eaque suscipit unde molestias, nobis natus vel non doloribus ab quidem saepe accusamus explicabo. Tenetur mollitia voluptate quae impedit sed aliquam quos tempore, necessitatibus ipsa repellendus cum ipsum at unde cupiditate eos eaque ratione vitae animi quisquam nisi, harum obcaecati nobis! Magni quo praesentium soluta accusantium quae officiis dolor ab eum et, debitis sit eos mollitia ex consequatur cum sapiente dolores iste doloremque ullam molestiae officia voluptatum! Quisquam enim quibusdam placeat porro, aut commodi illum, quos nostrum fugit a eligendi hic, sint voluptates. Et, quaerat, a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eaque. Esse quidem aliquid laudantium ea, perspiciatis praesentium incidunt cupiditate autem excepturi dolorum officia voluptatem quasi ducimus non tenetur blanditiis, ipsum quam voluptates eveniet est. Magnam neque, quo error, ullam temporibus earum, architecto omnis cum totam facilis aut expedita tempora? Iste aliquam, libero itaque, animi alias pariatur quos iure recusandae neque quo. Assumenda consequuntur doloremque cumque rerum aperiam, blanditiis incidunt voluptatibus! Hic maxime saepe nostrum eligendi, eveniet optio temporibus earum ipsum sunt et, qui voluptatem odit corporis natus animi inventore non expedita autem. Facilis ea quam perferendis dignissimos beatae! Aperiam culpa porro impedit ullam aliquam officiis nesciunt itaque pariatur sapiente, vitae quos quibusdam fugit exercitationem eaque suscipit unde molestias, nobis natus vel non doloribus ab quidem saepe accusamus explicabo. Tenetur mollitia voluptate quae impedit sed aliquam quos tempore, necessitatibus ipsa repellendus cum ipsum at unde cupiditate eos eaque ratione vitae animi quisquam nisi, harum obcaecati nobis! Magni quo praesentium soluta accusantium quae officiis dolor ab eum et, debitis sit eos mollitia ex consequatur cum sapiente dolores iste doloremque ullam molestiae officia voluptatum! Quisquam enim quibusdam placeat porro, aut commodi illum, quos nostrum fugit a eligendi hic, sint voluptates. Et, quaerat, a.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eaque. Esse quidem aliquid laudantium ea, perspiciatis praesentium incidunt cupiditate autem excepturi dolorum officia voluptatem quasi ducimus non tenetur blanditiis, ipsum quam voluptates eveniet est. Magnam neque, quo error, ullam temporibus earum, architecto omnis cum totam facilis aut expedita tempora? Iste aliquam, libero itaque, animi alias pariatur quos iure recusandae neque quo. Assumenda consequuntur doloremque cumque rerum aperiam, blanditiis incidunt voluptatibus! Hic maxime saepe nostrum eligendi, eveniet optio temporibus earum ipsum sunt et, qui voluptatem odit corporis natus animi inventore non expedita autem. Facilis ea quam perferendis dignissimos beatae! Aperiam culpa porro impedit ullam aliquam officiis nesciunt itaque pariatur sapiente, vitae quos quibusdam fugit exercitationem eaque suscipit unde molestias, nobis natus vel non doloribus ab quidem saepe accusamus explicabo. Tenetur mollitia voluptate quae impedit sed aliquam quos tempore, necessitatibus ipsa repellendus cum ipsum at unde cupiditate eos eaque ratione vitae animi quisquam nisi, harum obcaecati nobis! Magni quo praesentium soluta accusantium quae officiis dolor ab eum et, debitis sit eos mollitia ex consequatur cum sapiente dolores iste doloremque ullam molestiae officia voluptatum! Quisquam enim quibusdam placeat porro, aut commodi illum, quos nostrum fugit a eligendi hic, sint voluptates. Et, quaerat, a.</p>
  </div>
</div>

＆＃13;

Answer 2

我找到了2个简单的演示。

第一个使用jquery（在粘性菜单中滑动）：

http://www.jqueryscript.net/menu/Floating-Sticky-Slide-Menu-Plugin-With-jQuery-Slide-Menu.html

另一个是粘性边栏菜单。这个是非常基本的，但如果你不想使用jquery，你可以使用这个并使用html5 / css3动画来滑入/滑出菜单：

https://css-tricks.com/scrollfollow-sidebar/

这是你在找什么？

Answer 3

我已经对你的CSS进行了一些编辑（没有HTML编辑，尽管上面提到的关于如何组织你的代码的建议不应该被忽略）

https://jsfiddle.net/3s425ufa/

我从变换转变为过渡，因为它有更好的支持，更少的浏览器误解。我希望这会有所帮助。

#main-container{
  position:relative;
  width:100%;
}
#navbarsExampleDefault {
  outline: 1px solid red;
  position: fixed;
  top: 50px;
  right: -50%;
  background-color: black;
  z-index: -1;
  display: block;
  transition: right 1s linear;
}

.active-state #navbarsExampleDefault {
  right:0;
  z-index: 100;
}

sidenav固定而身体滚动

3 个答案: