如何实现页面向下滚动时，表格顶部的滚动条保持固定位置？

你的现有代码已经完成了两个滚动容器的水平滚动联动，仅需为顶部滚动容器添加吸顶定位样式，即可实现页面滚动时滚动条始终固定在指定位置：

样式修改 #

仅需要在原有CSS基础上为.wrapper1新增以下属性即可：

.wrapper1 {
    height: 20px;
    /* 新增吸顶配置 */
    position: sticky;
    top: 0; /* 滚动到距离视口顶部0px时开始固定 */
    z-index: 10; /* 避免被其他元素遮挡 */
    background-color: #ffffff; /* 遮挡下方内容时不会透明重叠 */
}

完整CSS如下：

.wrapper1,
.wrapper2 {
    width: 800px;
    border: none 0px RED;
    overflow-x: scroll;
    overflow-y: hidden;
}
.wrapper1 {
    height: 20px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
}

.div1 {
    width: 1000px;
    height: 20px;
}
.div2 {
    width: 1000px;
    background-color: #88ff88;
    overflow: auto;
}

逻辑代码无修改 #

原有滚动联动逻辑完全可以复用，无需调整：

$(function(){
    $(".wrapper1").scroll(function(){
        $(".wrapper2")
            .scrollLeft($(".wrapper1").scrollLeft());
    });
    $(".wrapper2").scroll(function(){
        $(".wrapper1")
            .scrollLeft($(".wrapper2").scrollLeft());
    });
});

注意事项 #

若测试时吸顶效果不生效，请检查.wrapper1的所有上级父元素是否设置了overflow: hidden、overflow: auto等属性，这类属性会导致sticky定位失效。

内容的提问来源于stack exchange，提问作者Saravana