如何使复杂的头部贴在窗口的顶部

Question

我有一个结构相当复杂的表thead。因此，在填充表体之前，我不能知道thead的行和单元格的比例(它包含数百行信息)。当我向下滚动时，我应该如何使thead粘滞到窗口顶部？

thead的结构如下所示：

​

​

我不能用div来划分thead和tbody，也不能用div来包装thead，因为tbody的结构依赖于tbody内容。我不能改变'thead‘的CSS display属性，因为它会杀死所有的结构。

我尝试将thead +tbody的第一行复制到其他表中，并通过滚动切换display:none，但原始thead与复制的不同，因为原始的tbody有其他内容。

标题结构：http://jsfiddle.net/ba14fyex/

Answer 1

我已经解决了这个问题，方法是将没有正文的表复制到div中，因此我得到：

<div id='wrapper'>
   <table id='copy'>...</table>
</div>
<table id='origin>...</table>

并使用jQuery将所有宽度和高度属性从原始复制到复制：

$(function(){
    var origin = $("#origin"),
        curTablePos = origin.position().top;

    $("#origin thead th").each(function(i){
        var replic = $($("#copy thead th")[i]),
            $this = $(this);

        replic.width($this.width());
        replic.height($this.height());
    });

    $("#copy").width(origin.width()); //setting up width

    $(window).scroll(function(e){
        var wrapper = $("#wrapper");
        if(window.scrollY >= curTablePos){
            wrapper.show();
        }else{
            wrapper.hide();
        }
    })
});

请评论，如果你可以做得更好，因为我发现这个解决方案相当硬的html-色情。

Answer 2

我有一个网站有同样的问题，并以这种方式解决它。它在滚动时克隆标题。如果有帮助，我会很高兴的。

https://codepen.io/DannaB67/pen/ayvXWe

CSS

body {
  background: #fefefe;
}
table {
  width: 720px;
  border: 1px solid #e4e4e4;
  border-radius: 0px 0px 0 0;
}
thead {width:720px;}
table th {
  border: 1px solid black;
  background-color: LightCyan;
  padding: 0 10px 0;
  height: 40px;
  width: 710px;
  text-align: left;
  text-transform: capitalize;
}
table td {
  padding: 10px;
  border-color: #9fdaed;
  border-right: none;
  border-left: none;
}

$nav-height: 120px;

.navbar-fixed {
  position: fixed;
  width:720px;
  top: -($nav-height); left:0px;
}

JS

(function($) {
"use strict";

var $navbar = $("#navbar"),
    y_pos = $navbar.offset().top,
    height = $navbar.height();

$(document).scroll(function() {
    var scrollTop = $(this).scrollTop();

    if (scrollTop > y_pos + height) {
        $navbar.addClass("navbar-fixed").animate({
            top: 0
        });
    } else if (scrollTop <= y_pos) {
        $navbar.removeClass("navbar-fixed").clearQueue().animate({
            top: "-20px"
        }, 0);
    }
});

})；

HTML

<table>
  <thead id="navbar">
    <tr>
      <th colspan="5">1</th>
      <th colspan="9">2</th>
    </tr>
    <tr>
      <th rowspan="3">3</th>
      <th rowspan="3">4</th>
      <th rowspan="3">5</th>
      <th rowspan="3">6</th>
      <th></th>
      <th colspan="3">7</th>
      <th colspan="3">8</th>
      <th colspan="3">9</th>
    </tr>
    <tr>
      <th>10</th>
      <th>11</th>
      <th colspan="2">12</th>
      <th>13</th>
      <th colspan="2">14</th>
      <th>16</th>
      <th colspan="2">17</th>
    </tr>
    <tr>
      <th>18</th>
      <th>19</th>
      <th>20</th>
      <th>21</th>
      <th>22</th>
      <th>23</th>
      <th>24</th>
      <th>25</th>
      <th>26</th>
      <th>27</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-row">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>1881</td>
      <td>c</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td style="color:green;">2270</td>
      <td style="color:green;">1318</td>
      <td style="color:green;">138</td>
    </tr>
  </tbody>
</table>