jquery - 如何用单滚动修复两表标题

Question

如何修复带有单个滚动条的双表标题？我有两个表，我正在尝试修复表头，使其在使用单个滚动条滚动时可见。我怎样才能让它成为可能？ Here is my JSFiddle .

<div id="tablecontainer">
<table id="lefttable" style="width:120px">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th> 
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>   
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>    
</tr>
</tbody>
</table>

</div>

Answer 1

我已经修改了你的一些代码。

Demo JSFIDDLE

html

<div id="tablecontainer">
<table id="mytable">
<thead>
<tr>
  <th>Firstname</th>
  <th>Lastname</th> 
</tr>
 </thead>
 <tbody>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>   
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>    
</tr>
</tbody>
</table>


<table id="mytable">
<thead>
<tr>
  <th>Head1</th>
  <th>Head2</th> 
  <th>Head3</th>
  <th>Head4</th> 
</tr>
 </thead>
 <tbody>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>   
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
  <tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>    
</tr>
</tbody>
</table>

<table id="header-fixed"></table>
</div>

CSS

body { height: 1000px; }
#header-fixed { 
    display:none;
    position: fixed; 
    top: 0px; 
    background-color:white;
}
#mytable {
    float:left;
}
#header-fixed thead {
    float:left;
}

js

var tableOffset = $("#mytable").offset().top;
var $header = $("#mytable > thead").clone();

var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});