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>

问题是每个对象都设置为float。设置为浮动的原因是因为网站必须可以调整到多个环境和大小，并且使用精确的像素值设置顶部/右侧/左侧/底部将无法扩展网站。

所以我的问题是：

如何在使用浮动时将左右列保持在适当位置。

编辑：

既然每个人都在要求它，那么这就是一个小问题。它只会显示无用的数据，让您了解滚动问题。

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/

固定位置有多个浮点数

1 个答案: