我正在尝试使用 Javascript scroll 事件来操作表头的 top 属性来保持表头固定。
这项技术的表现似乎因浏览器和屏幕分辨率的不同而大不相同(我的主要网站访问者是 Retina MBP)。目前它口吃得很厉害。它在这个 Fiddle 中似乎运行良好，但实际上一旦在您的桌面上就会变慢且卡顿。
https://jsfiddle.net/taylorpalmer/exp057a5/
我需要能够滚动页面并让表格标题在您滚动过去时保持不变。
var allTh = document.querySelectorAll("th");
var leftCells = document.querySelectorAll(".fixed-col");
var latestKnownScrollX = 0;
var latestKnownScrollY = 0;
var ticking = false;
var onScroll = function() {
latestKnownScrollX = document.body.scrollLeft;
latestKnownScrollY = document.body.scrollTop;
requestTick();
}
function requestTick() {
if (!ticking) {
requestAnimationFrame(update);
}
ticking = true;
}
var immediate = true;
var update = function() {
console.log('scrolling');
ticking = false;
var currentScrollY = latestKnownScrollY;
var currentScrollX = latestKnownScrollX;
var translateHead = (currentScrollY) +"px";
for(var i=0; i < allTh.length; i++ ) {
allTh[i].style.top = translateHead;
}
var translateCell = currentScrollX + "px";
for(var i=0; i < leftCells.length; i++ ) {
leftCells[i].style.left = translateCell;
}
};
window.addEventListener("scroll", onScroll);
我已经尝试过的事情:
- 使用
requestAnimationFrame()– 目前已实现 - 去抖动滚动——没有提高性能
- 节流滚动 - 没有提高性能
- 使用
transform: translate()而不是top– 没有什么不同
我想过但行不通的事情
- 使用
position: fixed或类似的:标题单元格将失去其动态宽度并使表格变得毫无值(value)
最佳答案
这样做怎么样？
https://jsfiddle.net/keikei/g3mt0rq6/
它的灵感来自 this answer of the question
js:
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $row = $("#table-1 > tbody > tr").first().clone();
var $fixedHeader = $("#header-fixed")
.append($header)
.append($("<tbody>").append($row));
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
} else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
html:
<body>
<div id="wrap">
<table id="header-fixed"></table>
<table id="table-1">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed-col">Test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test<span style="position: relative">Relative</span></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>
<td>test</td>
</tr>
<!-- and so on... --->
</tbody>
</table>
</div>
</body>
<script>
</script>
CSS:
#header-fixed {
position: fixed;
top: 0px;
display: none;
z-index: 20;
}
#header-fixed > tbody {
visibility: hidden;
}
#header-fixed > tbody > tr > td {
height: 0;
font-size: 0;
border: none;
}
th {
height: 100px;
background: #999;
color: white;
position: relative;
z-index: 10;
}
td {
background-color: white;
min-width: 100px;
height: 100px;
text-align: center;
position: relative;
z-index: 1;
}
.fixed-col {
z-index: 5;
}
body,
html {
margin: 0;
}
thead {
position: relative;
z-index: 6;
}
关于JavaScript 性能 : Fixed Table Header & Column on Scroll，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40273448/