Make Sticky Table Header Move With Horizontal Scroll

Question

I have an HTML table that has a "sticky" header, ie the header stays where it is as the table scrolls vertically.

The problem is that I need it to move with the horizontal scroll, but not the vertical.

CSS

    .sticky {
        position: fixed;
        top: 50px;
    }

JS

    window.onscroll = function () { stickyFunction() };

    var header = document.getElementById("theader");
    var sticky = header.offsetTop;

    function stickyFunction() {
        if (window.pageYOffset > sticky) {
            header.classList.add("sticky");
            $("theader").css("left", window.pageXOffset); //this is what I'm trying to make it move with horizontal scroll
            $("theader").css("margin-left", window.pageXOffset); //didn't work either
        } else {
            header.classList.remove("sticky");
        }
    }

Answer 1

Here was the solution for anyone who's curious:

    .sticky {
        position: absolute;
    }

    <div id="theader">
            <table id="headertable" border="0" class="corrTable">
    etc...

    window.onscroll = function () { stickyFunction() };

    var header = document.getElementById("theader");
    var sticky = header.offsetTop;

    function stickyFunction() {
        if (window.pageYOffset > sticky) {
            header.classList.add("sticky");
            $("#theader").css({ "top": ($(window).scrollTop() + 50) + "px" });
        } else {
            header.classList.remove("sticky");
        }
    }