jquery - 响应式侧边栏也是固定的

Question

我有一个响应式设计，其中我的边栏占 25%，我的内容占 75%。我的问题是，当我滚动页面时，侧边栏不固定并且不随页面向下滚动。

我尝试将其设置为 position:fixed 但随后我失去了对内容的整体响应百分比。

我怎样才能同时实现这两个目标？

fiddle : http://codepen.io/anon/pen/oXMmOz

HTML

  <div class="container max-width">
    <div class="sidebar"></div>
    <div class="content"></div>
  </div>

CSS

.max-width {
  max-width: 1300px;
  margin: 0 auto;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin-top: 54px;
}

.sidebar {
  background-color: red;
  width: 25%;
  padding-top: 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;  
}

.content {
  background-color: black;
  width: 75%;
  margin-left: 25%;
  padding-top: 15px;
}

@media(max-width: 768px) {
  .sidebar {
    left: -200px;
    position: fixed;
  }
  .content {
    width: 100%;
    margin-left: auto;
  }
}

Answer 1

您将侧边栏定位为绝对的。这将忽略父元素并使用主体作为引用。你应该使用 position: relative。

你还应该将内容向右浮动，而不是使用 margin left 25%..

我会为你制作 fiddle 。我以前从未使用过 codepen。

好的，看看这个。这接近您要找的东西吗？

http://codepen.io/anon/pen/pJZYvB

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.max-width {
  max-width: 1300px;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;

  left: 0px;




}

.sidebar {
  background-color: red;
  width: 25%;
  padding-top: 0;

  position: fixed;
  left: 0;
  top: 0;
  bottom: 0; 
  height: 100%;

}

.content {
  background-color: black;
  width: 75%;
  display: inline-block;
  float: right;
  padding-top: 15px;
}

@media(max-width: 768px) {
  .sidebar {
    left: -200px;
    position: fixed;
  }
  .content {
    width: 100%;
    margin-left: auto;
  }
}