Question

我希望<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(); } });

这是我到目前为止所做的，但它不起作用：

<tr id="row">

我应该在此代码中更改哪些内容适用于{{1}}

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

Answer 1

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

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

Answer 2

首先，不要连续搜索框。将它从表中提取到自己的元素

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

然后，将position:fixed应用于其中，margin-top应用于表格

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

最后，没有必要为此使用javascript / jQuery。

查看此fiddle

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

2 个答案: