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

Question

我想要在鼠标滚动时只滚动 div2，而不滚动 div1 和 div3。我希望当我滚动时，div1和div3的位置应该固定。在我们的示例中，当我滚动时，所有的div都会滚动，即div1和div3会离开屏幕。因此，我想固定这些div的位置。我尝试使用CSS来实现这一点(请查看jsFiddle链接)，但失败了。请给出一些建议，如何仅滚动div2，而div1和div3的位置不应更改。

预演链接: 预演

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

- Sumit patel

---

展示你尝试过的内容以及失败的地方。同时，提供不起作用的演示链接。 - DawidPi

使用 position:fixed;。 - Bhojendra Rauniyar

在div2中使用绝对定位。 - Bhojendra Rauniyar

你可以尝试我的jsfiddle。发送链接后即可。 - Sumit patel

你好@BhojendraNepal，谢谢你的回复。我已经尝试使用position:fixed，但它的效果是所有的div都重叠在一起。 - Sumit patel

@DawidPi，感谢您的回复，对不便表示歉意。这里我已经更新了我的jsFiddle链接，请查看并回复我解决方案。 :) - Sumit patel

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演示

- Emipro Technologies Pvt. Ltd.

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

- sheriffderek

---

这样经常拆卸并重新构建东西真是太好了。：） - sheriffderek

Answer 3

我认为你正在寻找这个代码，请检查一下，希望它能对你有所帮助。

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

*{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;
}

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

- Mukul Kant

---

感谢您的快速回复。对我来说它不起作用。它与我在jsFiddle中发布的相同。Div1和Div2仍然没有固定。当我滚动页面时，它会消失。 - Sumit patel

哦，真的吗？你有检查过当你滚动时代码片段 Div1 和 Div2 是否已经修复了吗？ - Mukul Kant

抱歉，Maddy。在这里它不起作用...但是当我创建一个新的jsFiddle并测试时它可以工作。我可以看到div1和div3是固定的，但是当我滚动时，div3会上移。这是那个jsFiddle链接：http://jsfiddle.net/patelsumit5192/xC2YH/33/ 请注意，我已从CSS中删除了body元素。 - Sumit patel

http://jsfiddle.net/xC2YH/34/ - Mukul Kant

太好了，它真的起作用了。我们快要完成了...但是当我滚动时，div2会有一点波动。请告诉我是否可能使其稳定和平滑。如果可以的话，那将更有用。再次感谢您的解决方案。我很感激您的时间和努力。再次感谢。 :) - Sumit patel

那是由于 Div2 的 margin-left: 9px; 导致的波动，您需要进行管理，感谢您的赞赏。您可以点赞或接受答案。 - Mukul Kant