使粘滞表标题与水平滚动一起移动

Question

我有一个带有“粘性”标头的HTML表，即，该标头在表垂直滚动时保持在原位置。

问题是我需要它与水平滚动一起移动，而不与垂直滚动一起移动。

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