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元素被父元素一波带走。