一、粘性布局的定义
position：sticky又称为粘性定位，是css3新增的。粘性定位的元素依赖于用户的滚动，在相对定位（relative）与固定定位（fixed）之间进行切换，基于位偏移的值进行偏移。
粘性定位可以被认为是相对定位和固定定位的混合
元素在跨越特定位偏移之前为相对定位，之后为固定定位。
示例：
.div{ position: sticky; top: 50px; }
设置了以上元素，在屏幕范围（viewport）视口滚动到元素top距离小于50px之前，div为相对定位。之后元素将固定在与顶部距离50px的位置，直到viewport视口回滚到50px以内。
特点：
-
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
-
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
-
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top:
50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。 -
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
二、应用示例
1、头部固定
头部导航栏开始时相对定位顶部，当页面元素发生滚动，当达到给定的位偏移时变为固定定位。
<!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>
<style>
.main-container {
max-width: 500px;
height: 500px;
margin: 0 auto;
margin-top: 40px;
overflow: auto;
margin-top: 20px;
}
.main-header {
height: 50px;
border: 5px solid red;
}
.main-content {
min-height: 600px;
border: 5px solid green;
margin-top: 20px;
}
.main-footer {
border: 5px solid blue;
margin-top: 20px;
}
.main-header {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
<div class="devide"></div>
</body>
</html>
2、页脚固定
此应用与头部固定类似，参考头部固定即可。
<!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>
<style>
.main-container {
max-width: 500px;
height: 500px;
margin: 0 auto;
margin-top: 40px;
overflow: auto;
margin-top: 20px;
}
.main-header {
height: 50px;
border: 5px solid red;
}
.main-content {
min-height: 600px;
border: 5px solid green;
margin-top: 20px;
}
.main-footer {
border: 5px solid blue;
margin-top: 20px;
}
.main-footer {
position: sticky;
bottom: 0;
}
</style>
</head>
<body>
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
<div class="devide"></div>
</body>
</html>
3、侧边栏固定
当页面滚动，位置超过侧边栏的顶部位偏移后，侧边栏变为固定定位，可用于实现侧边导航栏或侧边提示信息及广告展示。
<!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>
<style>
.box {
width: 500px;
border: 1px solid #000;
height: 100px;
overflow-y: auto;
}
.left {
width: 300px;
/* overflow-y: auto; */
}
.right {
width: 100px;
background-color: green;
margin-top: 50px;
}
.left,
.right {
float: left;
}
.right {
position: sticky;
top: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">寂静的森林里，树木窃窃私语，萤火虫的光不再温暖。鹅卵石铺就的小路上布满了多少人的脚印？我在这里轻轻吟颂着温暖的童话。带着怀表的兔子发着光，领着美丽的爱丽丝，进入神秘的扑克牌仙境，奇妙的经历只是一个梦而已，一切都会结束。冰冷的城墙述说着一个又一个故事，湛蓝的大海是人鱼的眼泪，透明的水晶棺是公主的幸福笑靥，梦幻的蔷薇花翩飞，我的童话又在哪里？ 山谷里的声音，让痛苦云淡风清，我聆听着古老的篇章，尘封的记忆在苏醒，漫延的泪水变成故事里的曾经。永远的童话，从一开始便不存在，一切只是幻想，一切只是虚无，镜子里的模样仿佛不再是自己，时间在嘲笑我们的年轻，承诺就像易碎的花瓶。
童话的书页渐渐合扰，与其相信美丽的梦，我觉得我的生活会更加芬芳。人生像童话，却胜于童话。
</div>
<div class="right">导航框</div>
</div>
</body>
</html>
4、页面进度条一
粘性布局可以实现页面游览进度条效果。以下是简易进度条的演示，实际实现中可将未滚动到顶部的元素设置为透明色，滚动到顶部时变为蓝色。
<!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>
<style>
.container {
width: 400px;
height: 500px;
overflow: auto;
margin: 40px auto 40px;
padding-bottom: 500px;
box-sizing: border-box;
}
.sticky {
width: 100px;
height: 10px;
background: rgba(36, 167, 254, 0.979);
position: -webkit-sticky;
position: sticky;
top: 0;
}
.sticky:nth-of-type(2) {
transform: translateX(100px);
}
.sticky:nth-of-type(3) {
transform: translateX(200px);
}
.sticky:nth-of-type(4) {
transform: translateX(300px);
}
</style>
</head>
<body>
<div class="container">
<h1>优美小短文</h1>
<div class="sticky"></div>
<p>寂静的森林里，树木窃窃私语，萤火虫的光不再温暖。鹅卵石铺就的小路上布满了多少人的脚印？我在这里轻轻吟颂着温暖的童话。</p>
<div class="sticky"></div>
<p>带着怀表的兔子发着光，领着美丽的爱丽丝，进入神秘的扑克牌仙境，奇妙的经历只是一个梦而已，一切都会结束。</p>
<div class="sticky"></div>
<p>冰冷的城墙述说着一个又一个故事，湛蓝的大海是人鱼的眼泪，透明的水晶棺是公主的幸福笑靥，梦幻的蔷薇花翩飞，我的童话又在哪里？</p>
<div class="sticky"></div>
<p>山谷里的声音，让痛苦云淡风清，我聆听着古老的篇章，尘封的记忆在苏醒，漫延的泪水变成故事里的曾经。
</p>
</div>
</body>
</html>
今天太累了，等有时间再把剩下的几种用法抓紧更新完毕。
