Sticky Header for Scrollable Table

HTML:

<table id="table-1">

    <thead>

     <tr>

            <th>Col1</th>

            <th>Col2</th>

            <th>Col3</th>

        </tr>

        <tr>

            <th>Col1</th>

            <th>Col2</th>

            <th>Col3</th>

        </tr>

    </thead>

    <tbody>

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

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

CSS:

body { height: 1000px; }

#header-fixed { 

    position: fixed; 

    top: 0px; display:none;

    background-color:white;

}

Javascript:

var tableOffset = $("#table-1").offset().top;

var $header = $("#table-1 > 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();

    }

});