这是可能不使用javascript？ [英] Is this possible without using javascript?

问题描述

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

I made a simple web UI with JSFiddle and I am wondering if the same UI can be made without using JavaScript.

一个小提琴说超过1000个字。

A Fiddle says more than 1000 words.

问题是（因为某些人似乎不太清楚）：如何在不使用任何JavaScript的情况下实现相同的结果？

So the question is (because it seems unclear for some people): How can I achieve the same results without using any JavaScript?

不想使用JavaScript重新计算每个滚动事件的位置，因为IE中的重新定位不够流畅。

PS: I don't want to use JavaScript to re-calculate the position on every scroll event because the repositioning in IE is not smooth enough.

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）：

JS (with jQuery):

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

推荐答案

当足够的浏览器支持它时，请使用新的 粘性位置值：

When enough browsers support it, you will be able to use the new sticky position value:

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

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

这篇关于这是可能不使用javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！