position:sticky粘性定位的几种巧妙应用与理解。

一、粘性布局的定义

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>

今天太累了，等有时间再把剩下的几种用法抓紧更新完毕。