当用户使用jQuery将表头滚动出视图时，表头将固定在顶部
当用户使用jQuery将表头滚动出视图时，表头将固定在顶部
提问于 2011-01-17 09:48:22
我正在尝试设计一个HTML表格，标题将留在页面顶部时，只有当用户滚动出它的视图。例如，表格可能离页面有500个像素，我如何才能使它在用户滚动标题离开视图(浏览器检测到它不再位于窗口视图中)时保持在顶部？有人能给我一个Javascript的解决方案吗？
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</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>因此，在上面的示例中，我希望<thead>在页面超出视图时与页面一起滚动。
重要:我是而不是寻找一个解决方案，在那里的<tbody>将有一个滚动条(溢出:自动)。
回答 25
Stack Overflow用户
回答已采纳
发布于 2011-01-17 11:26:27
您可以这样做，方法是点击window上的scroll事件处理程序，并使用另一个具有固定位置的table在页面顶部显示页眉。
HTML：
<table id="header-fixed"></table>CSS:
#header-fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}JavaScript:
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();
}
});当用户向下滚动到足以隐藏原始表头时，这将显示表头。当用户再次将页面向上滚动到足够远时，它将再次隐藏。
Stack Overflow用户
发布于 2017-05-04 22:56:25
纯CSS (不支持IE11 )：
table th {
position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
position: sticky;
top: 0;
z-index: 1; // any positive value, layer order is global
background: #fff; // any bg-color to overlap
}Stack Overflow用户
发布于 2011-05-03 00:56:43
嗯，我试图获得相同的效果，而不是求助于固定大小的列或整个表的固定高度。
我想出的解决方案是一个黑客。它包括复制整个表，然后隐藏除标题之外的所有内容，并使其具有固定的位置。
HTML
<div id="table-container">
<table id="maintable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</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>some really long line here instead</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>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<div id="bottom_anchor"></div>
</div>CSS
body { height: 1000px; }
thead{
background-color:white;
}javascript
function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#maintable").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll>anchor_top && scroll<anchor_bottom) {
clone_table = $("#clone");
if(clone_table.length == 0){
clone_table = $("#maintable").clone();
clone_table.attr('id', 'clone');
clone_table.css({position:'fixed',
'pointer-events': 'none',
top:0});
clone_table.width($("#maintable").width());
$("#table-container").append(clone_table);
$("#clone").css({visibility:'hidden'});
$("#clone thead").css({'visibility':'visible','pointer-events':'auto'});
}
} else {
$("#clone").remove();
}
}
$(window).scroll(moveScroll); 查看此处：http://jsfiddle.net/QHQGF/7/
编辑:更新了代码，以便标题可以接收指针事件(因此标题中的按钮和链接仍然有效)。这解决了luhfluh和Joe M。
新的jsfiddle在这里：http://jsfiddle.net/cjKEx/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4709390
复制相关文章
相似问题
腾讯云开发者
