说说position-sticky

在开发过程时，有没有遇到过这么一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示。我们一般会使用js监听scroll事件来实现，但是新增的css属性position:sticky可以简单实现。

简介

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

在目标区域以内，它的行为就像 position:relative; 在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky;这时的效果相当于position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。可以说是相对定位relative和固定定位fixed的结合。

元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。

使用条件

1.父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果

2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 。

3.父元素的高度不能低于sticky元素的高度

4、sticky元素仅在其父元素内生效

特性（坑）

1、sticky 不会触发 BFC。

2、样式表 z-index 无效。行内 style 写有效。

写法

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}