position:sticky

position:sticky是一个css3属性，类似position:relative和position:fixed的合体，目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定目标位置。

用法：

.sticky{
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
        }

实现效果请看这张GIF图

注意事项：

必须至少指定 top, right, bottom 或 left 四个值的任意一个，否则其行为与相对定位相同。并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。

兼容性：

这是一个新属性，没有被浏览器很好的兼容，下图为兼容性示意图