html - 粘性 header 到相对父级并溢出

Question

我到处都看到这个问题的变体，但似乎没有一个能解决我的问题。我有一个高大的页面，由于内容原因已经有一个 Y 滚动条。部分内容是一个div style="position: relative;"，暂且称之为Div1。 Div1 中包含导致 X 和 Y 滚动条的内容。在 Div1 中，假设我有一个表，其中的列太多导致 X 溢出，行太多导致 Div1 的 Y 溢出。

有什么方法可以使表格标题行粘在 Div1 的顶部并保持其宽度？

想象一下这样的结构:

<div id="MainPageDiv">
    //OnScreenContent
    //OnScreenContent
    //OnScreenContent
    //OnScreenContent
    <div class=outerDiv>
        <table class="innerTable">
            <thead>
                //thead columns
            </thead>
            <tbody>
                //tbody rows
            </tbody>
        </table>
    </div>
    //OnScreenContent
    //OnScreenContent
    //OnScreenContent
    //OFFScreenContent
    //OFFScreenContent
    //OFFScreenContent
</div>

所以 outerDiv 和表格位于页面顶部下方一点点。还要注意更下方有 OFFscreenContent。

我希望主页像正常情况一样滚动，但在 outerDiv 部分中，当我在 outerDiv 中滚动时，我希望 thead 停留在 outerDiv 容器的顶部。

Answer 1

我最终使用 CSS 和 jQuery 获得了想要的结果。在我的包装器类中，我使用了 position: relative 并且在表头上我将其定位为 absolute 并且在包装器滚动事件中我调整了 top包装器的 scrollTop() 的值。