Html 滚动时如何修复div位置？

How to fix div position while scrolling?

提问by Sumit patel

I want to scroll div2 on mouse scroll without scrolling div1 and div3. What I want is when I scroll, position of div1 and div3 should be fixed. In our example when I scroll all the div scrolls , meaning div1 and div3 goes away from the screen. So I want to fix position of those divs. I have tried to achieve that using css(look at jsFiddle link), but failed. Kindly give some suggestions how can I able to scroll only div2 whereas div1 and div3's position should not be changed. Thanks in advance.

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

Link Demo : Demo

链接演示： 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>

采纳答案by Emipro Technologies Pvt. Ltd.

Try this one , you can get your solution.

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

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

This may helps you , and this is the JS Fiddle DEMO

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

回答by sheriffderek

HTML

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

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

js小提琴

回答by Mukul Kant

I think you are looking like this check the code, I hope It will helps you.

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

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