Javascript 实现JS FloatThread插件，修复表头

我希望有人能向我解释如何在我的网页上实现floatThreadJS表插件

目前，我有一个很长的表格，当向下滚动时，阅读起来会很混乱，所以我决定尝试实现一个解决方案，在向下滚动时将第一行标记固定到表格顶部

这是我的表格代码：

<div class="col-sm-12">  


            <div class="table-responsive"> 
            <table class="table table-bordered table-striped sortable">
            <thead>
                <tr>
                    <th width="3%"></th>
                    <th>FINISH NO.</th>
                    <th>COLOUR</th>
                    <th>PURITY</th>
                    <th>CARAT</th>
                    <th>PRICE US $</th>
                    <th>FLUO</th>
                    <th>CUT</th>
                    <th>SYM</th>
                    <th>POLISH</th>
                    <th>NATTS</th>
                    <th>GIRDIE</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>Steven Spielberg</td>
                    <td>21.1.2004</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                    <td>16.69</td>
                    <td>34.07</td>
                    <td>17.38</td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>

我找到了一个解决办法；在，下载了.zip并将jquery.floatThread.min.js和jquery.floatThread.js文件复制到我的/js/文件夹中，将它们与jquery一起包含在页面标题中：

<script type="text/javascript" src="js/jquery.floatThead.min.js"></script>
<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>

我尽我所能遵循使用示例，并在表格上方添加了以下内容：

<script>$('table.table-bordered.table-striped.sortable').floatThead({
scrollingTop: pageTop,
// I need this offset because I don't
// want the table header to overlap
//my site navigation (its a global function)
useAbsolutePositioning: false
// absolutePositioning is better for
// highly dynamic sites
// (which this is not)
});
</script>

但当我重新加载页面时，表的行为方式是相同的。你能看到我做错了什么/解释一下如何修复它以备将来参考吗

作为参考，以下是它们的工作原理：

谢谢

pageTop可能未定义，因为它只存在于演示页面上，您在jquery插件之后添加jquery，并且没有文档就绪功能。。。我认为你需要从基础开始