如何让div浮动在滚动条上？

Question

如何让div浮动在滚动条上？

当我滚动时，我尝试浮动 2 个 div，但只会在左侧 div 的顶部显示右侧 div。知道如何解决这个问题吗？

超文本标记语言

<body>
        <div id="scroller-left">Some controls left</div>
        <div id="scroller-right">Some controls right</div>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS

body{
            height:2000px;
            width: 100%;
            margin:0;
            padding:0;
        }
        #scroller-left{
            float: left;
            background:#CCC;
        }
        #scroller-right{
            float: right;
            background:#CCC;
        }

Run Code Online (Sandbox Code Playgroud)

JavaScript

$(window).load(function(){
            $(window).scroll(function(){
                if($(window).scrollTop()>10){
                    $('#scroller-left').css('position', 'fixed');
                    $('#scroller-left').css('top', 0);
                    $('#scroller-right').css('position', 'fixed');
                    $('#scroller-right').css('top', 0);
                } else {
                    $('#scroller-left').css('position', 'relative');
                    $('#scroller-left').css('top', 0);
                    $('#scroller-right').css('position', 'relative');
                    $('#scroller-right').css('top', 0);
                }
            });
        });

Run Code Online (Sandbox Code Playgroud)

Jsfiddle
https://jsfiddle.net/q0fa81hf

谢谢。

Answer 1

are*_*eim 8

我认为，在这种情况下不需要JS解决方案。我的解决方案仅限CSS：

body {
    height:2000px;
    width: 100%;
    margin:0;
    padding:0;
}

#scroller-left{
    position: fixed;
    left: 0;
    background:#CCC;
}

#scroller-right{
    position: fixed;
    right: 0;
    background:#CCC;
}

Run Code Online (Sandbox Code Playgroud)

JSFiddle

归档时间：	10 年，6 月前
查看次数：	15462 次
最近记录：	10 年，6 月前