Question

我在页面顶部有一个数据表和一个导航栏，我希望桌面标题向下滚动导航栏，以便用户可以看到标题字段，如“教授”和“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>

任何人都有关于我能做什么的想法？如果需要澄清任何事情请告诉我。

Answer 1

您正在寻找的术语是“粘性表格标题”＆＃39;。将此信息提供给Google，您就可以找到解决此问题的大量解决方案。

这家伙提出了一个很好的解决方案：https://css-tricks.com/examples/PersistantHeaders/

你也可以使用css位置：粘性。这应该是这样的：

＆＃13;

div {border: 1px solid blue;
padding: 10px;}

.stick {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 10px;
}

＆＃13;

<br><br><br><br><br>

<div>
 
  <div class="stick">
    sticky
  </div>

  <br><br><br><br><br><br>
  end of container div
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

end of page

＆＃13;

Answer 2

将 navbar-fixed-top 类添加到 nav 标记。

如果需要，您可以查看bootstrap的示例以获取更多信息。

https://getbootstrap.com/examples/navbar-fixed-top/

当我滚动

2 个答案: