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

Question

我遇到了一个名为 jquery.floatThead 的插件，它非常适合在用户向下滚动时浮动表头，但由于某种原因我无法让这个插件工作。

请参阅下面的我的 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');

至少在笔中。