- 打开http://charliepark.org/css-only-sticky-headers/
- 向下滚动直到看到"The First 40 Elements"表格。
- 继续向下滚动直到页面底部。
在Chrome 57中,表头会固定在页面顶端,但在Chrome 58中不会。结果发现在Firefox中也没有固定表头。
我不确定这两个浏览器现在是否都有问题,或者是Chrome之前有问题但现在已经修复了。无论如何,正确的方法是什么来使表头固定呢?
在Chrome 57中,表头会固定在页面顶端,但在Chrome 58中不会。结果发现在Firefox中也没有固定表头。
我不确定这两个浏览器现在是否都有问题,或者是Chrome之前有问题但现在已经修复了。无论如何,正确的方法是什么来使表头固定呢?
th
而不是thead
。position: sticky;
在FF 58.0(64位)
中不适用于th
。 - Green回答你的问题:
如何正确地使表头粘性?
最好的方法是使用jquery/javascript和css的组合。
jQuery根据元素在页面上的位置和用户滚动时在视口中的位置,添加/删除一个类来使其粘性。CSS相应地更新其位置属性,当它不是粘性时应用相对定位值,当它是粘性时应用固定定位值。
你提到的那篇文章有一个链接,其中包含示例: https://github.com/kingkool68/stickyHeader