当滚动页面时，表格行必须保持固定在顶部

问题描述：

我希望<tr>与id="row"一起停留在页面顶部，当且仅当我向下滚动页面并脱离查看页面时。如果在页面上查看表格标题，则该表格排在他的位置而不是页面顶部。我有表：当滚动页面时，表格行必须保持固定在顶部

<table id="table"> 
<thead> 
    <tr> 
     <th>heading of table</th> 
    </tr> 
</thead> 
<tbody> 
    <tr id="row"> 
     <td colspan=3>Search box</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 id="row-fixed"></table>

这是我到目前为止已经完成，但它不工作：

var tableOffset = $("#table").offset().top; 
var $header = $("#table > row").clone(); 
var $fixedHeader = $("#row-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(); 
} 
});

我应该在这个代码改变什么，将工作for <tr id="row">

这是一个工作案例：http://jsfiddle.net/fj8wM/4489/

答

var $ header = $（“＃table> row”）。clone（）;

您的选择器无效，您缺少id标签。它应该是$（“＃row”）。clone（）;

答

首先，没有连续的搜索框。提取出来的表到自己的元素

<div id="row"> 
    Search box 
</div>

然后，应用position:fixed它和margin-top表

#row { 
    position: fixed; 
    top: 0px; 
} 
#table { 
    margin-top:25px; 
}

最后，有没有必要使用JavaScript/jQuery的这一点。

看看这个fiddle

当滚动页面时，表格行必须保持固定在顶部

相关推荐