滚动网页时固定表头

当网页的表格高度比较大时,比如超过一屏,我们希望表头能够一直显示,就像 Excel 的“首行冻结”一样。
搜索一下,看到一种思路是表头写两个,第一个只有表头,默认不显示,定位为 fixed 在顶部,第二个有表头和数据单元格。
然后滚动网页时,使用 js 计算表头是否应该显示,实时的设置可见性。

示例如下:

用法:
HTML 定义两个元素,一个是滚动时要固定在顶部的元素,暂且称为固定元素,需要有个 id;另一个是在视口滚动的元素的本身,称为滚动元素,用 data-target 属性指向固定的元素。
固定元素要默认不可见,注意不是 display:none, 而是 visibility: hidden,这样它的高度还在;同时定位方式设置为 fixed,top 在滚动时设置。

上面的 headFixed 方法需要传入两个参数,一个滚动元素,一个高度值。该方法会实时计算滚动元素的顶部是否到了给定的高度值、滚动元素的底部是否过掉了给定的高度值。然后将固定元素的 top 设置为给定的高度值。
GitHub 源代码:https://github.com/YouthLin/examples/blob/master/gnqc/tableFixedHead.html
Demo 地址:https://youthlin.com/demo/tableHeadFixed.html

点击量:6


发表评论

电子邮件地址不会被公开。 必填项已用*标注