position:sticky实现表头固定

最新推荐文章于 2023-05-19 10:26:16 发布

gtLBTNq9mr3

最新推荐文章于 2023-05-19 10:26:16 发布

阅读量1.4k

点赞数 2

文章标签： html 定位 css 交互设计 bitcoin

单词 sticky 的中文意思是“粘性的”，position:sticky 表现也符合这个粘性的表现。基本上，可以看出是 position:relative 和 position:fixed 的结合体。当元素在屏幕内，表现为 relative，就要滚出显示器屏幕的时候，表现为 fixed。例如，可以标题吸顶。

‍

‍其中导航元素设置了如下CSS：

nav {
  position: sticky;
  top: 0;
}

于是，正如大家看到，随着页面的滚动，当导航距离上边缘 0 距离的时候，黏在了上边缘，表现如同 position:fixed。

我们可以实现富有层次的滚动交互，比如下面：

.container {
  width: 100%;
  max-height: 500px;
  overflow: auto;
}
h4 {
  position: sticky;
  top: 0;
  background: green;
}
.content {
  width: 100%;
  height: 500px;
  background: red;
}


<body>
  <div class="container">
    <div>
      <h4>苹果</h4>
      <div class="content">1</div>
    </div>
    <div>
      <h4>香蕉</h4>
      <div class="content">2</div>
    </div>
    <div>
      <h4>葡萄</h4>
      <div class="content">3</div>
    </div>
  </div>
</body>

我们还可以实现表头固定，类似于下面的效果：

‍

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }


    html,
    body {
      width: 100%;
      height: 100%;
    }


    table {
      font-family: "Fraunces", serif;
      font-size: 125%;
      white-space: nowrap;
      margin: 0;
      border: none;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      border: 1px solid black;
    }


    table td,
    table th {
      border: 1px solid black;
      padding: 0.5rem 1rem;
    }


    table thead th {
      padding: 3px;
      position: sticky;
      top: 0;
      z-index: 1;
      width: 25vw;
      background: white;
    }


    table td {
      background: #fff;
      padding: 4px 5px;
      text-align: center;
    }


    table tbody th {
      font-weight: 100;
      font-style: italic;
      text-align: left;
      position: relative;
    }


    table thead th:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
    }


    table tbody th {
      position: sticky;
      left: 0;
      background: white;
      z-index: 1;
    }


    .container {
      /* 表格最大宽度和高度 */
      width: 100%;
      max-height: 500px;
      overflow: auto;
    }
</style>
</head>


<body>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>用户姓名</th>
          <th>用户年龄</th>
          <th>用户学校</th>
          <th>用户班级</th>
          <th>用户成绩</th>
          <th>用户个数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>张三</th>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <th>张三</th>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>


</html>

总结：

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于 top, right, bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden, scroll, auto, 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。

gtLBTNq9mr3

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position:sticky实现表头固定

单词 sticky 的中文意思是“粘性的”，position:sticky 表现也符合这个粘性的表现。基本上，可以看出是 position:relative 和 position:fixe...
复制链接

扫一扫