具有多个浮动的固定位置

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 放入浮动 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/