Seeking assistance with a persistent issue - I have a table with a fixed header on vertical scroll (see CSS and Javascript below), but the header fails to move horizontally when I scroll.
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>Would greatly appreciate any guidance on this matter.