如何在滚动时修复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

尝试这个，你可以得到你的解决方案。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

HTML

<aside class="thing-one">
    aside one
</aside>

<section class="main-content">
    <ul>
        <li>main content</li>
        <li>main content</li>
        <li>main content</li>
        <li>main content</li>
        <li>main content</li>
        ...
    </ul>
</section>

<aside class="thing-two">
    aside two
</aside>

CSS

/* global */
* {
    box-sizing: border-box;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
}

/* specific */
.thing-one, .thing-two {
    width: 25%;
    position: fixed;
    top: 0;
}

.thing-one {
    left: 0;
    background: yellow;
}

.thing-two {
    right: 0;
    background: red;
}

.main-content {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
    background: lightblue;
}

jsFiddle

Answer 3

我认为你看起来像这样检查代码，我希望它会帮助你。

＆＃13;

＆＃13;

$(document).ready(function(){
  $(window).scroll(function(){
    if($(this).scrollTop() > 1){
      $('.wrap').addClass('sticky')
    }
    else($('.wrap').removeClass("sticky"))
  });
});

＆＃13;

*{margin: 0;padding: 0;}
.Div1
{
    border: 1px solid #ddd;width:24%; background-color: white;float:left;border: 2px solid #c00;margin-right:5px;
    min-height:50px;
    left:0;
}
.Div2
{
    min-height: 1000px; width: 48%;/*overflow: auto; */background-color: green; 
    margin: 0 auto;
    float: left;
    margin-left: 9px;
}

.Div3
{
    width:24%; background-color: white;border: 2px solid #c00;
    min-height:50px;
    float: right;
    right: 0;
    top:0;
}
.wrap{
    width: 100%; min-height: 200px;position:relative;
}
.wrap.sticky .Div1 ,.wrap.sticky .Div3{
    position: fixed;
}
.wrap.sticky .Div2{
    float: none;
    margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrap">
    <div class="Div1">
         Div1
    </div>
 
    <div class="Div2">Div2</div>
 
     <div class="Div3">
         Div3
        </div>
</div>

＆＃13;

＆＃13;

＆＃13;