與多個浮子固定位置

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/