每天一个CSS小技巧--sticky粘性定位介绍 position: sticky;粘性定位，基于用户的滚动位置来定位。

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

原理：

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

它的行为就像positon: relative;；

而当页面滚动超出目标区域时，就会表现为position: fixed，固定在目标位置。

这里的目标区域是指，元素相对于其父元素，会有一个特定阈值，阈值通过指定top、right、bottom或left确定，

同时，只有指定四个阈值其中一个（或多个）时，sticky属性才会生效。


div .sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

注：

sticky属性的兼容性不是很好，Safari需要使用-webkit- prefix。

页面侧边导航，点击时自动定位至文章中目标区域，导航始终固定在页面右侧。