position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
使用：

sticky-nav {

position: sticky;
top: 100px;
}
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
1、父元素不能overflow:hidden

在开发时，经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是新增的css3属性position:sticky可以简单实现，省去了繁琐的计算
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性

position:ticky用法
position:sticky 被称为粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
简单的理解就是：在目标区域以内，它的行为就像 position:relative;在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
可以说是相对定位relative和固定定位fixed的结合
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。
position:sticky 使用条件
1、必须指定top、bottom、left、right 4个值之一，否则只会处于相对定位
2、sticky元素仅在其父元素内生效
3 、父元素不能overflow:hidden