粘滞位置在Firefox和Chrome 58中不起作用

时间:2017-04-20 05:13:21

标签: html css google-chrome firefox

  1. 转到http://charliepark.org/css-only-sticky-headers/
  2. 向下滚动,直到“前40个元素”表格可见。
  3. 继续向下滚动直到页面结束。

在Chrome 57中,表格标题会坚持下去,但不适用于Chrome 58.原来它也不会粘在Firefox上。

我不确定这两种浏览器现在是否都错了,或者Chrome是错误的,但现在正确。无论哪种方式,使表头粘贴的正确方法是什么?

2 个答案:

答案 0 :(得分:4)

here一样,Chrome仍支持表格格式中的位置粘贴 因此,可行的解决方法是将CSS指向th而不是thead 请参阅此示例:https://jsfiddle.net/owfmwdpm/

答案 1 :(得分:-1)

所以回答你的问题:

  

使表头粘贴的正确方法是什么?

最好的方法是使用jquery / javascript和css的组合。

jQuery根据页面在用户滚动时在页面和视口中的位置,从要粘贴的元素中添加/删除一个类。 css相应地更新它的位置属性,当它不粘时应用relative的位置值,在粘性时应用fixed

您提到的那篇文章有一个示例链接: https://github.com/kingkool68/stickyHeader