Перемещение липкого заголовка таблицы с помощью горизонтальной прокрутки

Question

У меня есть таблица HTML с «липким» заголовком, ie заголовок остается там, где он есть, когда таблица прокручивается вертикально.

Проблема в том, что мне нужно, чтобы он перемещался с горизонтальная прокрутка, но не вертикальная.

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

Вот решение для всех, кому интересно:

    .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");
        }
    }