用粘性定位sticky实现类似表头固定的效果

最新推荐文章于 2023-11-07 14:37:39 发布

舍予一

最新推荐文章于 2023-11-07 14:37:39 发布

阅读量520

点赞数

分类专栏：关于学习、开发中遇到的各种问题 CSS 文章标签： css

本文链接：https://blog.csdn.net/hsy0827/article/details/124449784

版权

关于学习、开发中遇到的各种问题同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

CSS

25 篇文章 0 订阅

订阅专栏

效果展示

在开发中有时候需要用到一些表格或图片等进行数据展示。但有时候会因为数据过长，没有办法在可视区内展示全部的数据，但屏幕下滑时又会将数据的标题头部划走不方便我们的查看。

这时会做一个在屏幕可见区滑动到这部分数据时，将这部分数据的标题头部始终保持在顶部，类似于excel表格的冻结窗格。

这个效果可以用js来实现，但需要监听窗口滚动事件、计算元素位置等等，会比较麻烦。

如果利用粘性定位sticky，就可以只通过简单的css就可以实现这一效果。

效果如下图：
在这里插入图片描述

参考代码

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 200vh;
    line-height: 50px;
    font-size: 28px;
    text-align: center;
    color: #fff;
    background-color: #eee;
  }
  .nav {
    position: fixed;
    top:0;
    z-index: 999;
    width: 100%;
    height: 50px;
    background-color: pink;
  }
  .box{
    position: relative;
    margin-top: 80vh;
  }
  .head {
    position: sticky;
    position: -webkit-sticky;
    top: 50px; /* 阈值 这里为吸顶导航栏的高度 */
    z-index: 10;
    height: 50px;
    background-color: skyblue;
  }
  .body {
    height: 500px;
    background-color: skyblue;
    opacity: .5;
  }
</style>
<body>
  <div class="nav">我是一个吸顶的导航栏</div>
  <div class="box">
    <div class="head">我是固定头部</div>
    <ul class="body">
      <li>我是身体部分</li>
      <li>我是身体部分</li>
      <li>我是身体部分</li>
      <li>我是身体部分</li>
      <li>我是身体部分</li>
      <li>我是身体部分</li>
      <li>我是身体部分</li>
      <li>我是身体部分</li>
      <li>我是身体部分</li>
      <li>我是身体部分</li>
    </ul>
  </div>
</body>
</html>

舍予一

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用粘性定位sticky实现类似表头固定的效果

效果展示在开发中有时候需要用到一些表格或图片等进行数据展示。但有时候会因为数据过长，没有办法在可视区内展示全部的数据，但屏幕下滑时又会将数据的标题头部划走不方便我们的查看。这时会做一个在屏幕可见区滑动到这部分数据时，将这部分数据的标题头部始终保持在顶部，类似于excel表格的冻结窗格。这个效果可以用js来实现，但需要监听窗口滚动事件、计算元素位置等等，会比较麻烦。如果利用粘性定位sticky，就可以只通过简单的css就可以实现这一效果。效果如下图：参考代码粘性定位可以被认为是相对定位和固定定
复制链接

扫一扫