Таблица строк должна оставаться фиксированной сверху при прокрутке вниз страницы

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

Что я должен изменить в этом коде, который будет работать для <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