Question

我使用JSFiddle创建了一个简单的Web UI，我想知道是否可以使用相同的UI 而不使用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/

Answer 2

我已经玩了你的样本（仅限css），并且进入了一个状态，它几乎是正确但不够接近imo。但是，因为你说它在IE中不够流畅，我想向你建议：

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

IE的最大问题不是计算速度慢得多，而且dom查询可能会非常慢，具体取决于它的版本。缓存dom元素可以产生很大的不同。

PS：是的，我知道您正在寻找非JS解决方案。但是，给出你的推理这个脚本可能会解决你的问题，而不是最终没有解决方案，因为很难获得适用于所有平台的跨浏览器解决方案。

Answer 3

我在HTML代码中添加了另一个容器，如下所示：

<div class="container">

    <div class="A">

        <div class="B">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
        </div>

    </div>

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

</div>

然后在容器类

中添加了一些样式

.container {
    background-color: green;
    height: 400px;
    width: 700px;
    position: absolute;
    top:0;
    overflow-x:hidden;
    overflow-y:scroll;
}

对 A 和 C 类进行了一些更改。我知道它是不 我们想要的结果，但它与它相似：这是小提琴http://jsfiddle.net/gnfwg08c/

Answer 4

似乎工作：

JsFiddle

为B添加了一个容器，其宽度为A，但高度为B。如果你不介意B底部的水平滚动条（你可以使用webkit-scrollbar隐藏它：JsFiddle）：/

这可能不使用JavaScript吗？

4 个答案: