我正在尝试使用 javascript 和 css 实现一个 HTML 表格，该表格可能同时具有粘性列和粘性标题。
基本上，当滚动位置发生变化时，我试图通过在正确的位置转换它们来确保标题和列的粘性。
这项技术工作正常，当我水平滚动时，粘性列正确显示在固定位置，但当我开始垂直滚动时，粘性列单元格与标题单元格重叠并隐藏它们。
Here is what I am seeing when it happens
我尝试使用 z-index 来确保标题始终位于行的顶部，但由于某种原因它不起作用。
如果有人遇到过此问题并可以分享解决方法，我们将不胜感激。
提前致谢。
HTML:
<table class="tablesorter">
<thead class="sticky-header">
<tr>
<th class="sticky-column">Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
...
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
...
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
...
</tr>
</tbody>
</table>
Javascript:
var $win = $(window),
$stickyHeader = $('.sticky-header'),
$stickyColumns = $('.sticky-column');
$(document).on('scroll', function () {
deltaY = $win.scrollTop() - $stickyHeader.offset().top;
deltaX = $win.scrollLeft() - $stickyHeader.offset().left;
$stickyHeader.children().css({
"transform": "translate(0px," + (deltaY > 0 ? deltaY : 0) +
"px)"
});
$stickyColumns.css({
"transform": "translate(" + (deltaX > 0 ? deltaX : 0) + "px,
0px)"
});
});
CSS:
table {
margin: 100px auto 800px auto;
}
thead th {
background-color: yellow;
border-right: 2px solid black;
border-left: 2px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 60px;
z-index: 3;
}
tbody td {
background-color: red;
border-right: 2px solid black;
border-left: 2px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 30px;
z-index: 1;
}
tbody td.sticky-column {
z-index: 2;
}
tbody th.sticky-column {
z-index: 4;
}
这是重现问题的 JSFiddle: http://jsfiddle.net/asoua/5942rqty/
最佳答案
我结合使用了 z-index 和对您的逻辑的更改以使其正常工作。该 Angular 柱需要 x 轴和 y 轴变换。
var $win = $(window),
$stickyHeader = $('.sticky-header'),
$stickyColumns = $('.sticky-column'),
$stickyCorner = $('.sticky-corner');
$(document).on('scroll', function () {
deltaY = $win.scrollTop() - $stickyHeader.offset().top;
deltaX = $win.scrollLeft() - $stickyHeader.offset().left;
$stickyColumns.css({
"transform": "translate(" + (deltaX > 0 ? deltaX : 0) + "px, 0px)"
});
$stickyHeader.children().css({
"transform": "translate(0px," + (deltaY > 0 ? deltaY : 0) + "px)"
});
$stickyCorner.css({
"transform": "translate(" + (deltaX > 0 ? deltaX : 0) + "px," + (deltaY > 0 ? deltaY : 0) + "px)"
});
});table {
margin: 100px auto 800px auto;
}
thead th {
background-color: yellow;
border-right: 2px solid black;
border-left: 2px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 60px;
z-index: 3;
}
tbody td {
background-color: red;
border-right: 2px solid black;
border-left: 2px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 30px;
z-index: 1;
}
tbody td.sticky-column {
z-index: 1;
}
thead tr.sticky-column {
z-index: 2;
}
thead th.sticky-corner {
background-color: orange;
z-index: 10;
position: relative;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tablesorter">
<thead>
<tr class="sticky-header">
<th class="sticky-corner">Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
<th>Whatever Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
<tr>
<td class="sticky-column">Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
<td>Whatever</td>
</tr>
</tbody>
</table>关于javascript - HTML 表格 : Sticky column overlapping header，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56606362/