當滾動頁面時，表格行必須保持固定在頂部

Question

我希望<tr>與id="row"一起停留在頁面頂部，當且僅當我向下滾動頁面並脫離查看頁面時。如果在頁面上查看錶格標題，則該表格排在他的位置而不是頁面頂部。我有表：

<table id="table"> 
<thead> 
    <tr> 
     <th>heading of table</th> 
    </tr> 
</thead> 
<tbody> 
    <tr id="row"> 
     <td colspan=3>Search box</td> 
    </tr> 
    <tr> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
    </tr> 
    <tr> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
    </tr> 
    <tr> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
    </tr> 
    <tr> 
     <td>info</td> 
     <td>info</td> 
     <td>info</td> 
    </tr> 
</tbody> 

<table id="row-fixed"></table>

這是我到目前爲止已經完成，但它不工作：

var tableOffset = $("#table").offset().top; 
var $header = $("#table > row").clone(); 
var $fixedHeader = $("#row-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(); 
} 
}); 

我應該在這個代碼改變什麼，將工作for <tr id="row">

這是一個工作案例：http://jsfiddle.net/fj8wM/4489/

Answer 1

var $ header = $（「＃table> row」）。clone（）;

您的選擇器無效，您缺少id標籤。它應該是$（「＃row」）。clone（）;

Answer 2

首先，沒有連續的搜索框。提取出來的表到自己的元素

<div id="row"> 
    Search box 
</div> 

然後，應用position:fixed它和margin-top表

#row { 
    position: fixed; 
    top: 0px; 
} 
#table { 
    margin-top:25px; 
} 

最後，有沒有必要使用JavaScript/jQuery的這一點。

看看這個fiddle