时间戳

首页 > 解决方案 > 滚动 div 高度后 CSS Sticky 标题消失

css - 滚动 div 高度后 CSS Sticky 标题消失

问题描述

编辑：问题已解决。不幸的是，我在此处发布的代码中没有任何内容，因此发布答案并没有多大用处。这是一个框架问题。

正如标题所暗示的那样，我在我的 CSS 中<thead>使用了一个带有粘性的 div（带有一个表格）。position: sticky;但是在滚动 div 高度后，标题只会随着内容向上滚动。

html代码是这样的

<div class="tablewrapper">
    <table>
        <thead>content with tr and th's</thead>
        <tbody>more content with tr and td's</tbody>
    </table>
</div>

我的 CSS 代码是这样的：

.tablewrapper {
    overflow: auto;
}

.tablewrapper table {
    /* This is empty */
}

.tablewrapper thead {
    display: block;
    position: sticky;
    overflow: visible
}

.tablewrapper tbody {
    overflow: visible;
    display: block;
}

滚动条来自.tablewrapper.

我怎样才能使thead保持粘性？

另外，澄清一下，代码比这里先进得多，所以不幸的是，我被迫在tablewrapper.

一个纯 CSS 修复会更好

标签： cssscrollsticky

解决方案

添加Top: 0;当它到达顶部时会粘住的thead标签

.tablewrapper thead {
  display: block;
  position: sticky;
  Top:0;
  overflow: visible
}

推荐阅读