向下滚动页面时，表格行必须固定在顶部

Question

I would like that <tr> with id="row" stays on top of page, when and only if I scroll page down and falls out of viewed page. If table heading is viewed on page, this table row it's on his place not on top of page. I have table:

<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>

This is what i've done so far, but it's not working:

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

What should I change in this code, that would work for <tr id="row">

Here is a working case: http://jsfiddle.net/fj8wM/4489/

Answer 1

var $header = $("#table > row").clone();

Your selector is invalid, you are missing the id hashtag. It should be $("#row").clone();

Answer 2

First, don't have the search box in a row. Extract it out of the table to its own element

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

Then, apply position:fixed to it and margin-top to the table

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

Finally, there is no need to use javascript/jQuery for this.

Check out this fiddle