表格能否加个表头随页面滚动固定表头

[liub1934]

This function solves the problem (这个功能解决的问题)

对于长表格，需要滚动才能查看表头和滚动条

Expected API (期望的 API)

效果可以参考ant vue的表格：https://next.antdv.com/components/table-cn#components-table-demo-sticky

[JerryChan31]

https://www.naiveui.com/zh-CN/os-theme/components/data-table#fixed-header-column

[07akioni]

https://www.naiveui.com/zh-CN/os-theme/components/data-table#fixed-header-column

这俩其实有点区别，antdv 那个要贴着页面顶端。我也不知道实现起来是不是麻烦

[JerryChan31]

看了了antd vue用了position: sticky来实现，限制是祖先元素不能有除了overflow: visible以外的overflow设置。

https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/

一行css就可以搞定，但就是跟n-scrollbar不太兼容。

[07akioni]

看了了antd vue用了position: sticky来实现，限制是祖先元素不能有除了overflow: visible以外的overflow设置。

https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/

一行css就可以搞定，但就是跟n-scrollbar不太兼容。

和 zindex 相关？

[JerryChan31]

和 zindex 相关？

用设置了overflow的组件包裹就会导致position: sticky失效…例如n-scrollbar（设置了overflow: scroll`）。

用文档作为例子，给<thead>元素加上position: sticky; top: 0;之后，要把n-data-table里的那层n-scrollbar的overflow改成visible才能粘连到页面的滚动上。

Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.

我的理解是如果表头和希望粘连的滚动区域中间出现了其他设置了overflow的元素，这个nearest scrollport就改变，不符合预期。

[07akioni]

和 zindex 相关？

用设置了overflow的组件包裹就会导致position: sticky失效…例如n-scrollbar（设置了overflow: scroll`）。

用文档作为例子，给<thead>元素加上position: sticky; top: 0;之后，要把n-data-table里的那层n-scrollbar的overflow改成visible才能粘连到页面的滚动上。

Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.

我的理解是如果表头和希望粘连的滚动区域中间出现了其他设置了overflow的元素，这个nearest scrollport就改变，不符合预期。

看起来这个和 scrollY 是冲突的，所以我感觉可以只处理不能滚的状态。

而且我看他们的 sticky 还有一个比较复杂的模式，有 offset 啥的，不知道是是不是也可以 JS 计算，不过如果我们要做的话肯定是先做 CSS 方案，现有一个能 work 的版本。

[JerryChan31]

JS思路估计大概就是创建一个IntersectionObserver观察表格位置，然后将表头设置成 position: fixed；
我周末可以找时间做一下。

[07akioni]

JS思路估计大概就是创建一个IntersectionObserver观察表格位置，然后将表头设置成 position: fixed； 我周末可以找时间做一下。

先看看别人的实现再开始弄

[bethe410]

和 zindex 相关？

用设置了overflow的组件包裹就会导致position: sticky失效…例如n-scrollbar（设置了overflow: scroll`）。

用文档作为例子，给<thead>元素加上position: sticky; top: 0;之后，要把n-data-table里的那层n-scrollbar的overflow改成visible才能粘连到页面的滚动上。

Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.

我的理解是如果表头和希望粘连的滚动区域中间出现了其他设置了overflow的元素，这个nearest scrollport就改变，不符合预期。

现在按照你说的方法修改style都不能固定表头了，很需要这个功能

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem

[AzronChan]

JS思路估计大概就是创建一个IntersectionObserver观察表格位置，然后将表头设置成 position: fixed； 我周末可以找时间做一下。

请问有实现了吗