[JavaScript知识库] CSS3 sticky 粘性布局

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> CSS3 sticky 粘性布局 -> 正文阅读

[JavaScript知识库]CSS3 sticky 粘性布局

在 CSS 中位置属性?position?大家对?relative、fixed、absolute?已经用的非常熟悉了，在 CSS3 中出现了?sticky?这个特殊的定位方式。

功能描述

在 W3C 标准中?sticky?功能描述：元素的位置基于用户滚动位置定位，sticky?定位的元素位置在?relative?和?fixed?之间切换，具体取决于滚动位置。它会被相对定位，直到浏览器可是区域中满足给定的偏移位置，否则会被粘住到固定的位置。（W3C Positon）

如何理解它的定位方式呢，我们直接上 Demo：

<!DOCTYPE html>
<html>
<head>
<style>
.title {
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #ccc;
}
.item {
    height: 50px;
    line-height: 50px;
}
</style>
</head>
<body>
    <h1>Contacts</h1>
    <div class="title">A</div>
    <div class="item">啊三</div>
    <div class="item">啊五</div>
    <div class="item">apple</div>
    <div class="item">Alph</div>
    <div class="item">ABC</div>
    <div class="item">apple</div>
    <div class="item">Alph</div>
    <div class="item">ABC</div>
    <div class="item">apple</div>
    <div class="item">Alph</div>
    <div class="item">ABC</div>
    <div class="title">B</div>
    <div class="item">Banana</div>
    <div class="item">Back</div>
    <div class="item">Banana</div>
    <div class="item">Back</div>
    <div class="item">Banana</div>
    <div class="item">Back</div>
    <div class="item">Banana</div>
    <div class="item">Back</div>
    <div class="item">Banana</div>
    <div class="item">Back</div>
    <div class="title">C</div>
    <div class="item">China</div>
    <div class="item">Cat</div>
    <div class="item">Cookie</div>
    <div class="item">Cake</div>
    <div class="item">Color</div>
    <div class="item">China</div>
    <div class="item">Cat</div>
    <div class="item">Cookie</div>
    <div class="item">Cake</div>
    <div class="item">Color</div>
</body>
</html>

运行上面的 Demo，大家会看到和 iPhone 通讯录类似的效果，通讯录的标题（首字母），会随着屏幕的滚动固定到屏幕的顶部。