如何使用 jquery.floathead 创建浮动 header？

Question

我遇到了名为 jquery.floatThead 的插件，它非常适合在用户向下滚动时浮动 table header，但我无法使该插件工作因为某些原因。

下面是我的 html 和 javascript，这里是我的 codepen。

Javascript:

var $table = $('Table1');
$table.floatThead();

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.10/jquery.floatThead.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.10/jquery.floatThead-slim.min.js"></script>



<table id="Table1">
  <thead>
    <tr>
      <th>Time</th>
      <th>Ideas</th>
      <th>Likes</th>
      <th>Sent to</th>
      <th>Project related</th>
      <!--
                                        <th>like or dislike</th>
                                        -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2014-10-31</td>
      <td>Content1</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content3</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-09-31</td>
      <td>Content4</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content1</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content3</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-09-31</td>
      <td>Content4</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content1</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-31</td>
      <td>Content3</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-09-31</td>
      <td>Content4</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-21</td>
      <td>Content2</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
    <tr>
      <td>2014-10-01</td>
      <td>Content</td>
      <td><a href="#" >20</a></td>
      <td><a href="#" >ipsum</a></td>
      <td> <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-tasks"></span></button></td>

    </tr>
  </tbody>
</table>

Answer 1

您错过了选择器中的井号。应该是：

$('#Table1');

至少在笔下。

如何使用 jquery.floathead 创建浮动 header？

How to create a floating header using jquery.floathead?

javascript

jquery

html

jquery-plugins