Question

这是将元素粘贴在另一个元素可见区域顶部的一个非常简单的示例。滚动.container后，.fixed会保持在最顶层。

<div class="container">
    <div class="fixed">fixed content</div>
    <div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>

<style type="text/css">
.container {
    position: relative;
    border: 1px solid blue;
    overflow: auto;
    width: 250px;
    height: 250px;
}
.content {
    height: 500px;
    width: 500px;
}
.fixed {
    position: absolute;
    width: 500px;
    margin-top: 2rem;
    border 1px solid red;
}
</style>

<script type="text/javascript">
    $('.container').scroll(function () {
        var top = $('.container').prop('scrollTop');
        console.log(top);
        $('.fixed').css('top', top);
    });
</script>

问题在于，如果浏览器速度不够快，滚动时.fixed元素会闪烁。它落后于滚动（将.fixed中的文字位置与.content中的文字进行比较，因为您正在滚动）。在我的桌面上它完美无缺，但是当我尝试在虚拟机中运行Chromium时，我可以看到闪烁。

在浏览器呈现页面之前，还有其他方法可以捕获滚动事件并设置.fixed元素的位置吗？

编辑更新了包含水平滚动的示例。固定元素只能垂直固定。

Answer 1

使用双容器：

<div class="container-wrapper">
    <div class="fixed">fixed content</div>
    <div class="container">
        <div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
    </div>
</div>

使用CSS：

.container-wrapper {
    position: relative;
    border: 1px solid blue;
    overflow: hidden;
    width: 250px;
    height: 250px;
}
.container {
    overflow: auto;
    width: 100%;
    height: 100%;
}
.content {
    height: 500px;
}
.fixed {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 245px;
    border 1px solid red;
    z-index: 10;
}

这样你滚动时就不需要jQuery重新定位.fixed div，而且它不会闪烁。

编辑要解决水平滚动...

$('.container').on('scroll', function() {
    var left = this.scrollLeft;
    $('.fixed').css('left', -left + 'px');
});

这应该移动.fixed div而不会闪烁。在您的解决方案中，导致闪烁是因为浏览器在滚动时移动了div，然后事件处理程序再次移动它。现在它只会移动一次。

如何在人工固定元素的滚动过程中摆脱闪烁？

1 个答案: