与多个浮子固定位置

Question

好日子大家，

我有一个有点问题，我知道我这样做过，但对我的生活中，我似乎无法弄清楚如何我做到了。

我有一个网站，使用3列。

左，内容和右。

左列和右列我希望在滚动期间保留在屏幕上。我已经完成了这个使用Jquery和CSS的固定位置。

.fixed { 
    position:fixed; 
    top:0px; 
} 
.paddingTop{ 
    padding-top:110px; 
} 

和

<script type="text/javascript"> 
         $(window).scroll(function() { 
          t = $('#contentliquid').offset(); 
          t = t.top; 

          s = $(window).scrollTop(); 

          d = t - s; 

          if (d < 0) { 
           $('#leftcolumnwrap').addClass('fixed'); 
           $('#leftcolumnwrap').addClass('paddingTop'); 
          } else { 
           $('#leftcolumnwrap').removeClass('fixed'); 
           $('#leftcolumnwrap').removeClass('paddingTop'); 
          } 
         }); 
      </script> 

的问题是，每个对象被设置为浮动。它被设置为浮动的原因是因为网站必须根据多种环境和尺寸进行调整，并且使用精确的像素值设置顶部/右侧/左侧/底部会消除缩放网站的能力。

所以我的问题是这样的：

如何保持左栏和右栏中的位置，同时利用浮动。

编辑：

既然大家都在问吧，这里有一个的jsfiddle。它只会显示无用的数据，并给你一个滚动问题的想法。

https://jsfiddle.net/qq4meudh/1/

Answer 1

你可以把你固定股利的浮动DIV中。

CSS

#page-wrap { width: 100%; } 
#page-wrap > div { margin: 0 0 50px 0; width: 100%; } 

.group:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.group { display: inline-block; } 

#content { 
      position: relative; 
      background: #eee; 
      z-index: 1; 
      width: 100%; 
     } 
     #content .col { 
      position: relative; 
      width: 27%; 
      padding: 3%; 
      float: left; 
     } 
     #content .col:nth-child(1) { left: 33%; } 
     #content .col:nth-child(2) { left: -33.3%; } 
     #content .col:nth-child(3) { left: 0; } 
     #content:before, #nicolas-gallagher:after { 
      content: ""; 
      position: absolute; 
      z-index: -1; 
      top: 0; 
      left: 33.4%; 
      width: 33.4%; 
      height: 100%; 
      background: #ccc; 
     } 
     #content:after { 
      left: 66.667%; 
      background: #eee; 
     } 

.fix { 
    position:fixed; 
    width: 27%; 
} 

HTML

<div id="page-wrap"> 
    <div id="content" class="group"> 
      <div class="col"><h3>Content</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis auctor suscipit. Integer pellentesque urna et magna convallis, eu ullamcorper orci sagittis. Sed laoreet elementum lectus eu convallis. Praesent fringilla pharetra mollis. Vestibulum eget aliquet leo. Pellentesque molestie diam non molestie pellentesque. Nam finibus est tristique bibendum accumsan. Etiam in felis orci. Vivamus mauris metus, iaculis eu nunc eu, condimentum ullamcorper est.</p></div> 
      <div class="col"> 
       <div class="fix"> 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
       </div> 
      </div> 
      <div class="col"> 
       <div class="fix"> 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
       </div> 
      </div> 
     </div> 
</div> 

这是你想要的吗？https://jsfiddle.net/arglab/xo00533o/2/