CSS - 快速实现悬浮吸顶，当页面滑动一定距离时固定吸附在顶部（position: sticky）

效果图

如下图所示，利用 position: sticky 属性轻松实现。

在这里插入图片描述

示例代码

新建一个 *.html 文件，一键复制运行起来。

<body>
    <section class="content">
        <div class="item">
            我是悬浮吸顶区域
        div>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
        <h1>我是数据...h1>
    section>
body>

<style>
/* 根节点(父容器) */
.content {
    /* position: relative; */
    background: #f1f1f1;
    width: 300px;
    height: 400px;
    overflow: auto;
}
/* 子节点(悬浮吸顶外层容器) */
.item {
    background: pink;
    padding: 20px;
    /* 核心属性,必须设置top,left或者bottom,right位置 */
    position: sticky;
    top: 0; left: 0;
    /* 或: bottom: xx, right: xx */
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

当被其他高层级容器遮挡时，请设置 z-index 并超过它。

相关阅读:
【笔试题】位运算
ZYNQ之FPGA学习----Vivado功能仿真
[leetCode 128] 最长连续序列
【云原生Kubernetes系列第七篇】一文掌握k8s之YAML文件（少攀谈，多沉潜，清醒而独立）
9--RNN
工作利器！熟悉这几款数据流图工具，事半功倍！
【广州华锐互动】智能家居设计3D虚拟还原系统
一致性哈希算法原理图文详解！学不会接着来砍我！
My English grammar notes
138589-19-2，羧基荧光素-氨基盐酸盐，FAM-NH2.HCl

原文地址：https://blog.csdn.net/weixin_44198965/article/details/132856182