README

那么它有什么好处呢？比如说，你想显示一个相当统一的表格数据的长列表，比如 证券交易所上市信息 或 体育统计数据，但你不想让用户在滚动页面时迷失在数据中。

使用 StickyTableHeaders 插件来解决这个问题：通过将 StickyTableHeaders jQuery 插件应用于表格，当您向下滚动时，列标题将粘在视口的顶部。

你可以尝试演示。

代码基于 这个概念证明。

安装

最佳的安装方式是使用 npm

npm install sticky-table-headers

或 Bower

bower install StickyTableHeaders

或直接从 unpkg CDN 加载

<script src="https://unpkg.com/sticky-table-headers"></script>

用法

初始化插件相当简单

$('table').stickyTableHeaders();

拆解

要移除插件

$('table').stickyTableHeaders('destroy');

手动触发更新

$(window).trigger('resize.stickyTableHeaders');

选项

你可以使用一个选项映射来初始化插件以调整行为。以下选项被支持

fixedOffset

一个数字或 jQuery 对象，指定粘性标题应该从页面顶部偏移多少

$('table').stickyTableHeaders({fixedOffset: $('#header')});

scrollableArea

一个 DOM 元素或 jQuery 对象。允许你覆盖哪个周围的元素正在滚动。默认为 window。 查看此演示的示例

$('table').stickyTableHeaders({scrollableArea: $('.scrollable-area')});

cacheHeaderHeight

性能调整：当设置为 true 时，插件将仅在表格宽度更改时重新计算表头单元格的高度。

默认值：false

$('table').stickyTableHeaders({cacheHeaderHeight: true});

z-index

插件使用 z-index 使 thead 覆盖 body。你可以通过传递一个 zIndex 选项来覆盖 z-index 值

$('table').stickyTableHeaders({zIndex: 999});

重新初始化

如拉取请求 #33 中所述，响应式页面可能需要在用户调整浏览器大小时重新初始化插件。这可以通过使用新选项调用插件来完成

$('table').stickyTableHeaders({fixedOffset: [new-offset]});

事件

插件在目标 <table> 元素上触发以下事件

• clonedHeader.stickyTableHeaders：当创建标题克隆时。
• enabledStickiness.stickyTableHeaders：当粘性标题启用时。
• disabledStickiness.stickyTableHeaders：当粘性标题禁用时。

困惑吗？

如果其中任何内容让您困惑，请查看 /demo 文件夹。那里有几个示例。例如，您可以查看如何与 Twitter Bootstrap 一起使用它。

已知问题

• Internet Explorer：您需要显式在 css 中设置 <th> 的填充，以便插件能够正常工作
• Internet Explorer：向表格添加水平边距会导致滚动时标题错位。（问题编号 #10）
• 在使用插件与tablesorter插件一起使用时，在Internet Explorer 8中会出错

浏览器支持

插件已在以下浏览器中验证为可用：

• Chrome 35
• Firefox 29
• Internet Explorer 8-11
• Safari 5

注意：在Internet Explorer 7中不可用（但表现良好）