基于jquery的表头固定的若干方法

基于jQuery的表头固定有很多种方法，下面我来详细讲解一下。

1. 使用position和scrollTop

这种方法利用了position属性的fixed值，scrollTop获取顶部距离，使表头一直固定在顶部。

首先，我们需要在CSS中设置表头的position属性为fixed，并设置它的top为0：

thead {
  position: fixed;
  top: 0;
}

然后在JS中，我们可以监听窗口滚动事件，当窗口的scrollTop值大于表格顶部距离时，将表头展示出来。反之，将表头隐藏。

$(window).scroll(function() {
  var scrollDistance = $(window).scrollTop();
  var tableTop = $('table').offset().top;

  if (scrollDistance >= tableTop) {
    $('thead').show();
  } else {
    $('thead').hide();
  }
});

这种方法的优点是比较简单易懂，缺点是存在一定的闪烁问题。

2. 使用sticky属性

sticky属性是CSS3新增的属性，可以使元素在滚动到某个位置时固定在页面上。但是因为该属性目前并没有可靠的跨浏览器支持，需要添加一些兼容性的代码：

thead {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 1;
}

其中，-webkit-sticky是Safari对sticky属性的支持。

这种方法的优点是代码简单，不需要JS，缺点是兼容性不是非常好。

下面给出一个示例，展示这种方法的效果：https://codepen.io/anon/pen/BEKZBV

以上是两种常用的基于jQuery的表头固定方法，使用时可以根据自己的需求选择具体的方法。