javascript - 固定位置的绝对效果

Question

基于这段代码:

HTML:

<div style="width:1000px;height:1000px;">
    <div id="box1" class="box" style="left:20px;top:20px;">
        My position-x is fixed but position-y is absolute.
    </div>
    <div id="box2" class="box" style="left:20px;top:120px;">
        My position-x is absolute but position-y is fixed.
    </div>
    <div id="box3" class="box" style="left:20px;top:220px;">
        Im positioned fixed on both axis.
    </div>
</div>

CSS:

.box 
{
    width:400px;
    height:80px;
    background:gray;
    position:fixed;  
}

JS:

$(window).scroll(function(){
//box one
    var $win = $(window);
    $('#box1').css('top', 20 -$win.scrollTop());
    $('#box2').css('left', 20 -$win.scrollLeft());
});

如果我直接在 css 中而不是在 js 中提供 css，我怎样才能让它以同样的方式工作？

Fiddle

Answer 1

不想这么说，但在纯 CSS2,3 中这是不可能的。