position:sticky纯css实现粘性定位让元素滚到顶部固定

想要让某些元素（例如导航，概要）滚动到顶部后就悬停在顶部固定，可以通过postion:sticky纯css简单实现，而不用使用js使得代码很复杂。

关于postion: sticky

MSDN关于sticky的描述是这样的：

元素按照文档的正常流定位，然后相对于其最近的滚动父元素和包含块（nearest block-level ancestor）进行偏移，包括表格相关的元素，基于top、right、bottom、 离开。 偏移量不会影响任何其他元素的位置。
这个值总是创建一个新的堆叠上下文。 粘性元素“粘附”到其最近的具有“滚动机制”的父元素（当溢出被隐藏、滚动、自动或覆盖时创建），即使该父元素不是最近的实际滚动父元素。

简单理解是：

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

再直白一点就是：

当给元素设置里sticky ，在屏幕的范围内，该元素不受定位的影响，当该元素的位置将要移出偏移的范围时，该元素的会变成 fixed 定位，根据设置的left ，top值等属性成固定定位的效果。

sticky用法

div {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

很简单三行代码就能实现了，比通过js监测滚动效率高多了。

实际效果直接看本站右侧栏，将本文往下滚动的时候可以看到效果。只在PC浏览器大屏上生效。

Sticky生效条件

• 父元素不能设置为overflow:hidden或者overflow:auto。

• 必须指定top bottom left right 4个值之一。

• 父元素的高度不能低于sticky元素的高度。

如果Sticky没有生效可以排查这几个原因。