我可以吗；冻结“；可滚动DIV中的一个元素，只有CSS（或者在移动设备上看起来不错的东西）？

我猜这个问题的答案是“不”，但那太好了，我无论如何都要问

我要做的是将一个元素冻结在一个可滚动的DIV中，这样它就可以垂直放置。这是为了在表中实现冻结行功能

使用JavaScript和绝对定位非常容易。以下是一个容器和三个内部div的HTML（请参阅live版本）：

以及将#absolutediv2保存在适当位置的JavaScript：

var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');

container.addEventListener('scroll', function() {
  div.style.top = container.scrollTop + 120 + 'px';
});

因此，absolutediv2正按照我想要的方式行事。但是看看#fixeddiv。这与我想要的很接近，我怀疑它在移动设备上看起来更好，因为浏览器可以在不等待运行脚本的情况下将其固定到位。除了它（a）正好在边界上运行，并且（b）不水平滚动

有没有什么方法可以让我在纯CSS上得到我想要的东西，这种东西可以在移动浏览器上很好地运行

（在我的页面中，一种方法是将冻结行放在容器DIV上方，但冻结行的数量会根据用户滚动到的位置而变化，这意味着容器DIV必须四处移动。）

编辑：

总而言之，我想要一个div：

使用其容器水平滚动

当其容器垂直滚动时保持不变

看起来它属于它的容器

在手机浏览器上看起来不错

最后一个是棘手的一点。我可以用绝对位置div和JavaScript实现#1、#2和#3，但它在移动浏览器上看起来很难看，因为它滞后。使用固定位置div，我可以得到#2和#4，我可以用JavaScript实现#1（在水平方向上，滞后不会让我太烦恼），但不能得到#3，因为固定位置div突然位于其容器的顶部

---

谷歌对此有一个建议，但这是一个非常极端的解决方案：

好的，我还没有测试过，但它应该是正确的。基本上，这使您能够使用我为您创建的HTML5数据属性创建多个“贴纸”项目

data special=“Sticker”

。jQuery查找这些数据，然后复制数据并将其附加到位于原始数据所在位置的另一个

元素，然后隐藏原始数据

#container {
    position: fixed;
    left: 20px;
    width: 250px;
    height: 250px;
    top: 20px;
    overflow: scroll;
}

#original-element {
    position: absolute;
    top: 30px;
    width: 300px;
    background-color: #CEC;
}

.sticker {
    position:absolute;
}    

<div id="wrapper">
    <div id="container">
        <div id="background">
           Content
        </div>
        <div id="original-element" data-special="sticker">
           I want to stay put!
        </div>
    </div>
</div>

$("[data-special='sticker']").each(function () {
    $('#wrapper').append(
        $('<div/>').html($(this).html())
                   .addClass("sticker")
                   .css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
                   .css('left', $('#container').css('left'))
                   .css('width', $('#container').css('width'))
                   .css('background-color', $(this).css('background-color'))
    );
    $(this).css('display', "none");
});    

#容器{
位置：固定；
左：20px；
宽度：250px；
高度：250px；
顶部：20px；
溢出：滚动；
}
#原始元素{
位置：绝对位置；
顶部：30px；
宽度：300px；
背景色：#CEC；
}
.贴纸{
位置：绝对位置；
}    
内容
我想呆在原地！
$（“[data special='sticker']”）。每个（函数（）{
$（'#包装器'）。追加(
$（''）.html（$（this.html（））
.addClass（“贴纸”）
.css（$（'#container'）.css（$）+parseInt（$（this.css（$）））
.css（'left'，$（'#container'）。css（'left'））
.css（'width'，$（'#container'）。css（'width'））
.css（'background-color'，$（this）.css（'background-color'））
);
$（this.css（'display'，'none'）；
});    

让我知道它是如何为您工作的，还有一个缺点是，一旦原始元素被隐藏，它所占用的空间就会被折叠。。。我会试着想出一个解决办法

编辑：

更改JS以获取

#容器的宽度，而不是原始元素的宽度，因为原始元素比容器大

编辑：

测试：

一些问题是，如果您知道滚动条的宽度，那么可以从值中减去if，那么元素也将与滚动条重叠

还要检查上面更新的代码。出现了一些错误…
您可能需要查看以下帖子：




如中所述：

无脚本的替代方法是
位置：sticky
，即
在Chrome、Firefox和Safari中受支持。见
以及

到今天为止，这个演示链接在Firefox中对我有效，但在Chrome中不起作用。
你真的想要一个纯CSS解决方案，还是一个可以在移动浏览器中工作的解决方案？你说得对。我更喜欢在移动浏览器中工作的东西。我刚在iPad上检查了JavaScript解决方案，结果很难看。远远落后于滚动事件。您可能已经想到了它，但您可以在框外创建一个外部元素，然后将其放置在原始元素位于框内的位置上。然后隐藏原始元素。这样一来，唯一需要运行的javascript就是设置。那么你就不必担心它落后了，这正是fixeddiv所要做的。问题是它超越了边界。我可以将其限制为容器元素的大小，但它仍然会在滚动条的顶部绘制。我发现这建议完全覆盖浏览器的滚动功能，并使用transform3d滚动元素，允许我一次更新屏幕并避免延迟。我不想尝试，但如果我必须尝试，我必须尝试。我把你的答案拼凑成了一个JSFIDLE:。元素基本上保持不变，但它看起来不属于容器，也不随它水平滚动。@fluggo是的，你比我快到了。我的JSFIDLE也在上面。我算出了一些扭结，但不与对象滚动和滚动条重叠是一些挫折。。。您可以将新元素放在一个可滚动的div中，然后通过编程将两者滚动到一起。。。但在这一点上，使用另一种方法可能是值得的。。。我想知道是否有一种方法可以加速你原来的计算，这样它就不会滞后
var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');

container.addEventListener('scroll', function() {
  div.style.top = container.scrollTop + 120 + 'px';
});

#container {
    position: fixed;
    left: 20px;
    width: 250px;
    height: 250px;
    top: 20px;
    overflow: scroll;
}

#original-element {
    position: absolute;
    top: 30px;
    width: 300px;
    background-color: #CEC;
}

.sticker {
    position:absolute;
}    

<div id="wrapper">
    <div id="container">
        <div id="background">
           Content
        </div>
        <div id="original-element" data-special="sticker">
           I want to stay put!
        </div>
    </div>
</div>

$("[data-special='sticker']").each(function () {
    $('#wrapper').append(
        $('<div/>').html($(this).html())
                   .addClass("sticker")
                   .css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
                   .css('left', $('#container').css('left'))
                   .css('width', $('#container').css('width'))
                   .css('background-color', $(this).css('background-color'))
    );
    $(this).css('display', "none");
});