javascript - 这可能不使用 javascript 吗？

Question

我用 JSFiddle 制作了一个简单的网络用户界面，我想知道是否可以不使用 JavaScript 制作相同的用户界面。

A Fiddle说了 1000 多个单词。

所以问题是(因为有些人似乎不清楚):如何在不使用任何 JavaScript 的情况下获得相同的结果？

PS:我不想在每次滚动事件时都使用JavaScript重新计算位置，因为IE中的重新定位不够流畅。

HTML:

<div class="A">
    <div class="B">
        B
    </div>

    <div class="C">
        This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
    </div>
</div>

CSS:

.A {
    background-color: yellow;
    height: 400px;
    width: 700px;
    overflow:scroll;
    position: relative;
}

.B {
    background-color: green;
    height: 1000px;
    width: 1500px;
    position: absolute;
    top:0;
    color:white;
}

.C {
    background-color: red;
    position: absolute;
    left: 100px;
    top: 0px;
    height: 1000px;
    width: 100px;
}

JS(使用 jQuery):

$('.A').scroll(function(e) {
    $('.C').css('left', e.target.scrollLeft + 100);
});

Answer 1

当有足够多的浏览器支持它时，您将能够使用新的 sticky position value :

.C {
    position: sticky;
    position: -webkit-sticky;
    left: 100px;
    top: auto; /* Default value */
}

http://jsfiddle.net/5z3nLqq5/12/