如何在滚动时固定div位置？

Question

我想在鼠标滚动时滚动 div2，而不滚动 div1 和 div3。我想要的是当我滚动时，div1和div3的位置应该是固定的。在我们的示例中，当我滚动所有 div 时，这意味着 div1 和 div3 会离开屏幕。所以我想修复这些 div 的位置。我尝试使用 css 来实现这一点（查看 jsFiddle 链接），但失败了。请给我一些建议，我怎样才能只滚动 div2 而 div1 和 div3 的位置不应该改变。提前致谢。

链接演示：Demo

.Div1 {
  border: 1px solid #ddd;
  width: 24%;
  background-color: white;
  float: left;
  border: 2px solid #c00;
  margin-right: 5px;
  min-height: 50px;
}

.Div2 {
  min-height: 1000px;
  width: 45%;
  margin-right: 5px;
  overflow: auto;
  background-color: green;
  float: left
}

.Div3 {
  border: 1px solid #ddd;
  width: 24%;
  background-color: white;
  float: left;
  border: 2px solid #c00;
  min-height: 50px;
}

<div style="width: 100%; min-height: 200px;">
  <div class="Div1">
    Div1
  </div>

  <div class="Div2">Div2</div>

  <div class="Div3">
    Div3
  </div>
</div>

Answer 1

尝试一下这个，你就能得到你的解决方案。

.Div1 {
  border: 1px solid #ddd;
  width: 24%;
  background-color: white;
  float: left;
  border: 2px solid #c00;
  margin-right: 5px;
  min-height: 50px;
  position: fixed;
}

.Div2 {
  min-height: 1000px;
  width: 45%;
  margin-right: 5px;
  overflow: auto;
  background-color: green;
  position: absolute;
  left: 28.5%;
}

.Div3 {
  border: 1px solid #ddd;
  width: 24%;
  background-color: white;
  border: 2px solid #c00;
  min-height: 50px;
  position: fixed;
  right: 0px;
}

<div style="width: 100%; min-height: 200px;">
  <div class="Div1"> Div1</div>
  <div class="Div2">Div2</div>
  <div class="Div3"> Div3 </div>
</div>

这可能对你有帮助，这是JS Fiddle DEMO