向下滾動頁面時，表格行必須固定在頂部

Question

我希望id="row" <tr>停留在頁面頂部，當且僅當我向下滾動頁面並從查看的頁面中掉出來時。 如果在頁面上查看表標題，則該表行位於他的位置而不位於頁面頂部。 我有桌子：

<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();
}
});

我應該在此代碼中進行哪些更改，這將適用於<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。

看看這個小提琴