Jquery 引导表标题在我滚动时固定在导航栏下_Jquery_Html_Css_Twitter Bootstrap

Jquery 引导表标题在我滚动时固定在导航栏下

jquery html css twitter-bootstrap

Jquery 引导表标题在我滚动时固定在导航栏下,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我在页面顶部有一个数据表和一个导航栏，我希望表格标题可以随着导航栏向下滚动，这样用户在查看数据时可以看到标题字段，如“professor”和“gpa” 这是我的HTML： <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo

我在页面顶部有一个数据表和一个导航栏，我希望表格标题可以随着导航栏向下滚动，这样用户在查看数据时可以看到标题字段，如“professor”和“gpa”

这是我的HTML：

    <!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>VT Grade Distribution: Powered by Keller Han</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">

    <!-- Optional Bootstrap theme -->
    <link rel="stylesheet" href="bootstrap-theme.min.css">
    </head>

    <body>
    <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a href="index.html" class="navbar-left"><img src="logo.png" style="max-width:80px; margin-top: -15px; margin-right: 10px"></a>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="stats.html">Home<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Courses</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
                <a class="dropdown-item" href="acis.html">Accounting and Information Systems</a>
              <a class="dropdown-item" href="aero.html">Aerospace Engineering</a>
                <a class="dropdown-item" href="bit.html">Business Information Technology</a>
              <a class="dropdown-item" href="cs.html">Computer Science</a>
              <a class="dropdown-item" href="ece.html">Electrical and Computer Engineering</a>
                <a class="dropdown-item" href="finance.html">Finance</a>
                <a class="dropdown-item" href="math.html">Math</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

    <table class="table table1 table-bordered table-hover">
  <thead>
        <meta name="viewport" content="width=device-width, initial-      scale=1">
        <h1 class = "text-center display-k">Computer Science</h1>
      </thead>
        <tbody>
        <tr>
      <th>Course ID</th>
      <th>Title</th>
      <th>Professor</th>
      <th>GPA</th>
      <th>A%</th>
      <th>B%</th>
      <th>C%</th>
      <th>D%</th>
      <th>F%</th>
      <th>Withdrawals</th>
      <th># of Classes</th>
    </tr>
    <tr>
      <th rowspan="2" valign="top">1014</th>
      <th rowspan="2" valign="top">Intro Computational Thinking</th>
      <th>Bart</th>
      <td>3.50</td>
      <td>68.90</td>
      <td>20.80</td>
      <td>9.20</td>
      <td>0.00</td>
      <td>1.10</td>
      <td>0</td>
      <td>2</td>
    </tr>


VT等级分配：由Keller Han提供动力








计算机科学
课程ID
标题
教授
平均成绩
A%
B%
C%
D%
F%
取款
#班级
1014
计算思维导论
巴特
3.50
68.90
20.80
9.20
0
1.10
0
2.

有人知道我能做什么吗？如果需要澄清，请告诉我。

将类导航栏固定顶部添加到导航标签中
如果需要，可以查看bootstrap的示例以获取更多信息

您要查找的术语是“粘性表格标题”。把这个输入谷歌，你会发现很多解决这个问题的方法
这家伙提出了一个很好的解决方案，你可以试试：
您还可以使用css position:sticky。这应该是这样的：

div{边框：1px纯蓝色；填充：10px；} .棍子{ 职位：-网络工具包粘性；位置：-莫兹粘；位置：-ms粘性；位置：-o-粘性；位置：粘性；顶部：10px； }

粘性的货柜舱尾页面末尾
可能重复的