Horizontal scrollable sticky HTML-Table-Header

Question

I have a HTML-Table with a lot of headers which doesn't fit in the screen. Due to the amount of rows I use a sticky header which works perfect in the vertical way.

Unfortunately it keeps its sticky nature also in horizontal scrolling. How shall I change my code to allow horizontal scrolling but keep the fixed header for vertical scrolling?

The table itself is straight forward:

<table id="calctable">
    <thead class="fixed">
        <tr id="table-head">
            <th><!--Loads of them--></th><th><!--Continues like forever--></th>
        </tr>
    </thead>
    <tbody>
        <tr><td><!--And even more of this kind...--></td></tr>
        <tr><td><!--And even more of this kind...--></td></tr>
    </tbody>
</table>

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

And my Javascript (works, but... well only in vertical scroll):

$(function() {

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

        });

And my CSS:

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

Thank you!

Answer 1

With a lot of thanks to Nico OI was able to solve this problem within a few seconds.

I just needed to add another Javascript:

<script src="https://rawgithub.com/mkoryak/floatThead/master/dist/jquery.floatThead.min.js">

Removed the (now obsolete) CSS-Information above completely and replaced the Javascript with just one line:

       $(function() {                
            $('#calctable').floatThead();
        });

Works!!!