javascript - 表固定头 : Should move when scrolling horizontally

Question

我有一个严重的问题，我无法解决，我希望你能帮助我.. 所以我有一个垂直滚动的固定标题表(下面的 CSS 和 Javascript)但是当我水平滚动时我的标题没有移动..

    window.onscroll = function() {myFunction()};
                var header = document.getElementById('myHeader');
                var sticky = header.offsetTop;
                function myFunction() {
                    if (window.pageYOffset > sticky) {
                        header.classList.add('sticky');
                    } else {
                        header.classList.remove('sticky');
                    }
                }

    .sticky {
                  position: fixed;
                  top: 0;
                  z-index:1000;
                  padding-left:62px;
                  overflow-x: scroll;
                }


    

    
    <table id='table' class='display cell-border'>  
                    <thead class='head' id='myHeader'>
                        <tr>
                            <th class='noSearch'></th>
                            <th class='noSearch'></th>
                            <th>Shell ID</th>
                            <th>Package ID</th>
                            <th>Package Title</th>
                            <th>Product Type</th>
                            <th>Project</th>
                            <th>Current Phase</th>
                            <th>Status</th>
                        </tr>
</thead>
    <tr>
    <td>Shell ID</td>
                            <td>Package ID</td>
                            <td>Package Title</td>
                            <td>Product Type</td>
                            <td>Project</td>
                            <td>Current Phase</td>
                            <td>Status</td>
                    </tr>
          </table>

我希望你能帮助我.. 干杯

Answer 1

试试这个方法:https://codepen.io/anon/pen/vVGeVM

<!------------------------------Css-------------------->
.tableContainer{
  overflow: auto;
  height:100px;
}
td, th{
  width:80px;
  text-align:center;
}
<!------------------------html-------------------------->

<table id='table' class='display cell-border'>  
    <thead class='head' id='myHeader'>
            <tr>
                <th class='noSearch'></th>
                <th class='noSearch'></th>
                <th>Shell ID</th>
                <th>Package ID</th>
                <th>Package Title</th>
                <th>Product Type</th>
                <th>Project</th>
                <th>Current Phase</th>
                <th>Status</th>
             <tr>
 </thead>
 <tbody>
   <tr>
    <td colspan="12">
      <div class="tableContainer">
        <table>
          <tr>
            <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
          </tr>
        </table>
      </div>
     </td>
   </tr>
 </tbody>
</table>