登录
当前位置： 首页 > 知识库问答 >
问题：

Navbar和THead固定顶

马坚
2023-03-14

我正在创建一个简单的网站，将显示一个计算机列表及其一些信息。到目前为止，我已经得到了我想要的一切功能，除了我不能让thead在滚动时固定在导航栏上。我对这一切还很陌生，但我会在下面列出一些我尝试过的东西，以及我的网页的简化版本。

  1. 通过AD在导航栏/表格周围放置div：不会滚动

非常感谢您的帮助！

超文本标记语言

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input id="myInput" onkeyup="myFunction()" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>
  </div>
</nav>
<br><br>
<table id="myTable" class="table table-striped table-hover tablesorter">
  <thead>
    <tr>
      <th scope="col">Status</th>
      <th scope="col">Computer</th>
      <th scope="col">IP Address</th>
      <th scope="col">MAC</th>
    </tr>
  </thead>
  <tbody id="myTableSearch">
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 1</td>
      <td>192.168.1.21</td>
      <td>92:41:04:FF:15:EB</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 2</td>
      <td>192.168.1.22</td>
      <td>5C:3B:C8:EA:6C:3A</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 3</td>
      <td>192.168.1.23</td>
      <td>BD:2D:94:8A:63:83</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 4</td>
      <td>192.168.1.24</td>
      <td>9C:D7:16:1F:0B:A3</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 5</td>
      <td>192.168.1.25</td>
      <td>05:C4:95:A6:B2:E6</td>
    </tr>
     <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 1</td>
      <td>192.168.1.21</td>
      <td>92:41:04:FF:15:EB</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 2</td>
      <td>192.168.1.22</td>
      <td>5C:3B:C8:EA:6C:3A</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 3</td>
      <td>192.168.1.23</td>
      <td>BD:2D:94:8A:63:83</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 4</td>
      <td>192.168.1.24</td>
      <td>9C:D7:16:1F:0B:A3</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 5</td>
      <td>192.168.1.25</td>
      <td>05:C4:95:A6:B2:E6</td>
    </tr>
     <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 1</td>
      <td>192.168.1.21</td>
      <td>92:41:04:FF:15:EB</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 2</td>
      <td>192.168.1.22</td>
      <td>5C:3B:C8:EA:6C:3A</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 3</td>
      <td>192.168.1.23</td>
      <td>BD:2D:94:8A:63:83</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 4</td>
      <td>192.168.1.24</td>
      <td>9C:D7:16:1F:0B:A3</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 5</td>
      <td>192.168.1.25</td>
      <td>05:C4:95:A6:B2:E6</td>
    </tr>
     <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 1</td>
      <td>192.168.1.21</td>
      <td>92:41:04:FF:15:EB</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 2</td>
      <td>192.168.1.22</td>
      <td>5C:3B:C8:EA:6C:3A</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 3</td>
      <td>192.168.1.23</td>
      <td>BD:2D:94:8A:63:83</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 4</td>
      <td>192.168.1.24</td>
      <td>9C:D7:16:1F:0B:A3</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 5</td>
      <td>192.168.1.25</td>
      <td>05:C4:95:A6:B2:E6</td>
    </tr>
  </tbody>
</table>

JS公司

$(function() {
  $("#myTable").tablesorter();
});

    $(document).ready(function(){
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTableSearch tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
});

https://jsfiddle.net/80Lt2d6p/

共有3个答案

戚奇略
2023-03-14 
.table-area {
  position: relative;
  z-index: 0;
  margin-top: 60px;
}

table.rajresponsive-table {
  display: table;
 
  table-layout: fixed;
  
  width: 100%;
 
  height: 100%;
}

table.rajresponsive-table thead {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  line-height: 3em;
  
  table-layout: fixed;
  display: table;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input id="myInput" onkeyup="myFunction()" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>
  </div>
</nav>
<br><br>
<section class="content-area">
  <div class="table-area">
    <table class="rajresponsive-table table">
  <thead>
    <tr>
      <th scope="col">Status</th>
      <th scope="col">Computer</th>
      <th scope="col">IP Address</th>
      <th scope="col">MAC</th>
    </tr>
  </thead>
  <tbody id="myTableSearch">
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 1</td>
      <td>192.168.1.21</td>
      <td>92:41:04:FF:15:EB</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 2</td>
      <td>192.168.1.22</td>
      <td>5C:3B:C8:EA:6C:3A</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 3</td>
      <td>192.168.1.23</td>
      <td>BD:2D:94:8A:63:83</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 4</td>
      <td>192.168.1.24</td>
      <td>9C:D7:16:1F:0B:A3</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 5</td>
      <td>192.168.1.25</td>
      <td>05:C4:95:A6:B2:E6</td>
    </tr>
     <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 1</td>
      <td>192.168.1.21</td>
      <td>92:41:04:FF:15:EB</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 2</td>
      <td>192.168.1.22</td>
      <td>5C:3B:C8:EA:6C:3A</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 3</td>
      <td>192.168.1.23</td>
      <td>BD:2D:94:8A:63:83</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 4</td>
      <td>192.168.1.24</td>
      <td>9C:D7:16:1F:0B:A3</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 5</td>
      <td>192.168.1.25</td>
      <td>05:C4:95:A6:B2:E6</td>
    </tr>
     <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 1</td>
      <td>192.168.1.21</td>
      <td>92:41:04:FF:15:EB</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 2</td>
      <td>192.168.1.22</td>
      <td>5C:3B:C8:EA:6C:3A</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 3</td>
      <td>192.168.1.23</td>
      <td>BD:2D:94:8A:63:83</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 4</td>
      <td>192.168.1.24</td>
      <td>9C:D7:16:1F:0B:A3</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 5</td>
      <td>192.168.1.25</td>
      <td>05:C4:95:A6:B2:E6</td>
    </tr>
     <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 1</td>
      <td>192.168.1.21</td>
      <td>92:41:04:FF:15:EB</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 2</td>
      <td>192.168.1.22</td>
      <td>5C:3B:C8:EA:6C:3A</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 3</td>
      <td>192.168.1.23</td>
      <td>BD:2D:94:8A:63:83</td>
    </tr>
    <tr>
      <td><span class="badge badge-success">Online</span></td>
      <td>Computer 4</td>
      <td>192.168.1.24</td>
      <td>9C:D7:16:1F:0B:A3</td>
    </tr>
    <tr>
      <td><span class="badge badge-danger">Offline</span></td>
      <td>Computer 5</td>
      <td>192.168.1.25</td>
      <td>05:C4:95:A6:B2:E6</td>
    </tr>
  </tbody>
</table>
 </div>
</section>
曹振
2023-03-14

也许这会帮助你，这是一把基于你自己的小提琴。

1）通过一些简单的检查来固定thead，如下所示

$(window).scroll(function() {
if ($(this).scrollTop() >= 100) { 
    $('#myTable').addClass('fixed');  
} else {
            $('#myTable').removeClass('fixed');
    }
});

2）应用一些css

#myTable.fixed thead { 
  position: fixed; background: #dddddd;
  left: 0; width: 100%;
}

我不确定哪种格式被破坏了，如果你说的是th，那么你可以用一些css来设计它

https://jsfiddle.net/bLjdhc9x/1/

龚凯泽
2023-03-14

我们可以使用这里提供的答案作为起点，并进行以下修改：

.table-fixed {
  width: 100%;
}

.table-fixed thead th {
    position: sticky;
    position: -webkit-sticky;
    /*top: 0;*/
    top:55px; /* the height of the fixed nav-bar */
    z-index: 999;
    background-color: #000;
    color: #fff;
}

现在删除

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input id="myInput" onkeyup="myFunction()" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>
  </div>
</nav>
<!-- remove the br from here, we will tackle this with the top:55px -->

这是一个更新的JSFiddle:
演示

 类似资料：
  • twitter bootstrap navbar固定顶部重叠站点

    我正在使用我的网站上的引导和有问题的navbar固定顶部。当我只是使用常规的navbar时，一切都很好。然而，当我尝试将它切换到navbar固定顶部时，站点上的所有其他内容就像navbar不存在一样向上移动，并且navbar与它重叠。下面是我的基本布局： 我试图完全复制引导示例，但仍然有这个问题，只有当使用navbar固定顶部。我做错了什么？

  • 固定位置元素与bootstrap 3 navbar冲突

    我一直试图解决这个问题，并寻找可能的解决方案，但仍然没有得到正确的一个。我有这个自举的navbar和我有一个社交媒体图标固定定位。但如果我缩小屏幕，切换菜单，社交媒体图标就会出现在菜单前面。我想把它放在菜单后面。我还尝试使用并使其高于图标，但仍然相同。请看下面我的代码： null null

  • 在Bootstrap 3中使用固定标题（navbar）向下滚动表格行时，如何在顶部放置表格标题（thead）？

    问题内容： 引导布局。桌子上有很多行。 问题？ 当我滚动页面导航栏将在那里，因为它是固定的。当我滚动更多时，我希望将表标题固定在导航栏中，并且table（table-body）的内容滚动而没有滚动条！ HTML 问题答案： $(document).ready(function(){ $(“.sticky-header”).floatThead({top:50}); }); 具有2个表和固定标题的D

  • Navbar（Navbar）

    导航栏是Bootstrap站点的突出功能之一。 Navbars是响应式“元”组件，可用作应用程序或站点的导航标题。 Navbars在移动视图中折叠，并在可用视口宽度增加时变为水平。 导航栏的核心包括网站名称和基本导航的样式。 默认导航栏 要创建默认导航栏 - 将类.navbar, .navbar-default到“nav”标记。 将role = "navigation"添加到上面的元素，以帮助获取

  • 固定背景固定和位置固定元素的Chrome问题

    问题内容： 我已经有一段时间了，这似乎是一个Chrome重绘错误，尚未修复。因此，我正在寻找任何权宜之计。 主要问题是页面上的元素具有使用以下内容的背景图像时： 如果另一个元素固定并具有子视频元素，则它将导致具有背景图像的元素消失。 现在，它可以在Safari（以及Firefox和IE）中正常运行，因此这并不是Webkit的问题。我已经应用了一些没有用的建议属性。 目前，我的解决方案只是通过媒体查

  • &lt;thead&gt;

    描述 (Description) HTML标记用于向表中添加标题。thead标签与tbody标签和tfoot标签一起用于确定表格的每个部分（页眉，页脚，正文）。 例子 (Example) <!DOCTYPE html> <html> <head> <title>HTML thead Tag</title> </head> <body> <table sty

相关问答

进口固体和固体引导程序navbar不显示折叠div和navbar-nav列表navbar问题固定表头与固定列表不响应宽度固定宽度的JScrollPane

相关文章

使用Swift和NSURLSession固定iOS证书具有固定滚动行和固定滚动列的大型动态html表两个div，一个固定宽度，另一个固定位置元素垂直固定，绝对水平固定表固定页眉和可滚动主体

相关阅读

类型绑定和对象转换操作系统的定义和功能MySQL定义条件和处理程序指针变量的定义和使用未经验证的重定向和转发

相关工具

NavBarreact-native-navbar首列固定的列表ScrollView滑动固定效果超核Kinetis固件库

相关文档

fbreader 和 移动 DM 和 加解密十分钟搞定 pandasAndroid 开机 和 编译系统 和 binder理解 WebKit 和 ChromiumReact 和 Webpack 小书
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.