我想知道如何修复表格标题,即使我们在网站上向下滚动并超出表格 View 。 我想使用 css 样式来做到这一点。谢谢。
我还想知道如何修复网页上的某个元素,使其即使在我们向下滚动时也始终显示。图片可以是文字。使用 div 和 css
最佳答案
您可以通过点击窗口上的滚动事件处理程序来执行类似的操作,并使用另一个具有固定位置的表格在页面顶部显示标题。
例子:
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
body { height: 1000px; }
#header-fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-1">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
关于css - 修复网页上的表头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31136586/