css中sticky定位是个很有趣的定位方式，在不满足限定条件时，sticky元素跟随大部队上下滚动，表现的像个普通元素，一旦达到了限定条件，它会呈现出类似fixed定位的效果，一下子变成人群中最靓的崽。虽然也可以通过利用js代码监控页面滚动事件来达到类似的效果，但有谁会拒绝仅用两行css代码实现一个动态的效果呢：
#sticky-nav{
position: sticky;
top: 20px;
}sticky的使用条件
sticky元素有点类似轨道中的滑块，其轨道就是sticky元素的父元素。sticky元素的伸缩范围局限于其父元素所提供的空间长短，当sticky元素到达限定位置时，由于父元素同时在跟随文档流上行，表现在页面上的效果就是sticky元素进入相对静止的状态，实际上这是一个父元素底部预留空间逐渐收窄的过程，直到sticky元素滑动到父元素底部，轨道空间走完，元素就会被父元素带走。
所以想要让sticky元素正常工作，我们需要为其提供一条轨道（父元素具备足够的长度），除此之外，我们还需要一个限制条件，指定元素到达某个位置时触发动作，这个条件可以是top、bottom、left、right4个值之一。如果有必要的话，同时指定两个两个值也是可以的：
#sticky-nav{
position: sticky;
top: 20px;
bottom: 20px;
}多个sticky元素的情况
同一父元素下存在多个sticky元素的时候，前一个元素会被后一个sticky元素所覆盖，如果多个sticky元素的限位值相同，尺寸又刚好一致的话，视觉上看起来似乎是后者把前者给顶替掉了。多个sticky元素会依次叠加，直到它们父元素的预留活动空间走完，所有sticky元素被父元素一波带走。
